使用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定义高度然后隐藏。试试吧，希望它能解决你的问题。

这是相同的更新样式。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;