jquery - 用 TweenMax 翻转盒子

Question

我创建了以下翻转框，但问题是当我打开折叠时，它的高度与翻转框的两侧相等，而不是仅覆盖事件的翻转框。有谁知道如何解决这个问题？请

https://jsfiddle.net/qnwtLbzs/2/

$(document).ready(function(){
        TweenMax.set('#flipContainer, #testCard',{
        perspective:500
        });
    TweenMax.set($('#testCard'),{
        transformStyle:'preserve-3d'
        });
    TweenMax.set('#testCard div',{
        backfaceVisibility:'hidden'
        });
    TweenMax.set('#back',{
        rotationX:-180
        });

    var flipped=false;
    $('#testCard').click(function(){
        if(!flipped){
            TweenMax.to($(this),1,{
                rotationX:180,
                onComplete:function(){
                    flipped=true;
                    }
                });
        }
        else{
            TweenMax.to($(this),1,{
                rotationX:0,
                onComplete:function(){
                    flipped=false;
                    }
                });
            }
        });
});

Answer 1

请为内容 div 定义高度，然后设置为 over hidden。尝试一下，希望它能解决您的问题。

这是相同的更新样式。

#collapse > .content {
  width: 100%;
  display: none;
  margin: 0;
  padding: 0;
  height:357px; 
  overflow:hidden;
}