javascript - 防止在 CSS3 和 jQuery 翻转动画中 flex

Question

我正在将 CSS3 翻转动画与一些 jQuery 生长动画相结合。我正在尝试让 div 翻转并增长以在第一次点击时显示背面内容，然后在第二次点击时翻转和缩小。问题是我受到了一种我希望可以避免的鞠躬影响。我放慢了动画速度，使 flex 问题更加明显。

LINK TO JSFIDDLE

HTML

<div class="container">
    <div class="ui-flip">
        <div class="flipper">
            <div class="ui-flip-front" style="background: green;"><h1>Front</h1></div>
            <div class="ui-flip-back" style="background: yellow;"><h1>Back</h1></div>
        </div>
    </div>
</div>

CSS

.container {
    margin: 0 auto;
    width: 100px;
    padding: 100px;
}   

.ui-flip {
     position: relative;
     display: inline-block;
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     perspective: 1000;
     -moz-transform: perspective(1000px);
     -moz-transform-style: preserve-3d;
  }

  .ui-flip.hover .flipper {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      transform: rotateY(180deg);
      filter: FlipH;
      -ms-filter: "FlipH";
   }

   .ui-flip, .flipper, .ui-flip-front, .ui-flip-back {
       width: 100%;   
       height: 100%;   
    }

    .flipper {
       position: relative;
       -webkit-transition: 5s;
       -webkit-transform-style: preserve-3d;
       -moz-transition: 5s;
       -moz-transform: perspective(1000px);
       -moz-transform-style: preserve-3d;
       transition: 5s;
       transform-style: preserve-3d;
    }

    .ui-flip-front, .ui-flip-back {
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 5s;
        -webkit-transform-style: preserve-3d;
        -moz-transition: 5s;
        -moz-transform-style: preserve-3d;
        -ms-transition: 5s;
        -ms-transform-style: preserve-3d;
        transition: 5s;
        transform-style: preserve-3d;
        top: 0;
        left: 0;
    }

    .ui-flip .ui-flip-front {
        position: relative;
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
        z-index: 2;
    }

    .ui-flip .ui-flip-back {
        position: absolute;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

带有 jQ​​uery 库的 javascript

$('.ui-flip').toggle(function() {
    var topOffset = 0;
    var rect = this.getBoundingClientRect();
    $(this).data('top', rect.top);
    $(this).data('left', rect.left);
    $(this).data('width', this.offsetWidth);
    $(this).data('height', this.offsetHeight);
    this.classList.add('hover');
    $(this).stop().animate({
        top: '-' + (rect.top - topOffset) + 'px',
        left: '-' + rect.left + 'px',
        width: $(window).width() + 'px',
        height: $(window).height() - topOffset + 'px'
     }, 5000, function () {
         this.style.position = 'fixed';
         this.style.width = '100%';
         this.style.height = '100%';
         this.style.top = 0 + topOffset + 'px';
         this.style.left = 0 + 'px';
     });


}, function() {
    var rect = this.getBoundingClientRect();
    this.classList.remove('hover');
    $(this).stop().animate({
        top: $(this).data('top') + 'px',
        left: $(this).data('left') + 'px',
        width: $(this).data('width') + 'px',
        height: $(this).data('height') + 'px'
     }, 5000, function () {
         this.removeAttribute('style');
     });  
});

Answer 1

动画被剪裁是因为您使用 css3 透视选项“限制”了视口(viewport)。尝试从 css 中删除它:

   .ui-flip {
        position: relative;
        display: inline-block;
        -moz-transform-style: preserve-3d;
    }

这是一个没有它的演示 - http://jsfiddle.net/uxrhC/2/