CSS3旋转动画导致Animate.css晃动动画消失

Question

每当我在 CSS3 旋转动画之后执行 Animate.css 摇动动画时，被摇动的 div 就会消失。这只发生在旋转的 div 的背面。正面没有这个问题。

我整理了一个 jsfiddle 来演示这个问题。

http://jsfiddle.net/kG9Ld/1/

HTML

<div class="wrappers">
  <div class="wrapper shaker front">
    <p>Front</p>
    <p><a href="#" class="flip">Flip</a></p>
    <p><a href="#" class="shake">Shake</a></p>
  </div>
  <div class="wrapper shaker back">
    <p>Back</p>
    <p><a href="#" class="flip">Flip</a></p>
    <p><a href="#" class="shake">Shake</a></p>
  </div>
</div>

CSS

.wrappers {
  -webkit-transition:-webkit-transform 1s;
  -moz-transition:-moz-transform 1s;
  -ms-transition:-ms-transform 1s;
  -o-transition:-o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.wrapper {
    height: 100px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width: 100px;
}
.front {
    background-color: red;
    z-index: 3;
}
.back {
    background-color: green;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 1;
}
.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flipped .back {
    z-index: 3;
}

JavaScript

$('.flip').on('click', function (e) {
    $wrappers = $('.wrappers');

    $wrappers.toggleClass('flipped');
});

$('.shake').on('click', function (e) {
    $('.shaker').addClass('animated shake');
});

$('.shaker').on('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(e) {
    $('.shaker').removeClass('animated shake');
});

Answer 1

问题是摇晃动画的变换属性覆盖了 .back 元素的变换属性:rotateY(180deg)。

解决方案就是修改动画并结合使用转换:

WORKING EXAMPLE HERE

-webkit-transform: translateX(0) rotateY(180deg);

这当然需要新的关键帧:

@-webkit-keyframes shakeBack {
  0%, 100% {
    -webkit-transform: translateX(0) rotateY(180deg);
    transform: translateX(0) rotateY(180deg);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px) rotateY(180deg);
    transform: translateX(-10px) rotateY(180deg);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px) rotateY(180deg);
    transform: translateX(10px) rotateY(180deg);
  }
}

您现在需要根据元素的正面/背面是否可见添加不同的动画。

.shakeBack {
  -webkit-animation-name: shakeBack;
  animation-name: shakeBack;
}

修改后的 JS - 这可以写得更好，但你明白了。

$('.shaker.front .shake').on('click', function (e) {
    $(this).parents('.shaker').addClass('animated shake');
});
$('.shaker.back .shake').on('click', function (e) {
    $(this).parents('.shaker').addClass('animated shakeBack');
});