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

Posted 2023-03-06

【中文标题】CSS3 旋转动画导致 Animate.css 抖动动画消失

【英文标题】：CSS3 rotate animation causes Animate.css shake animation to disappear

【发布时间】：2014-02-24 18:17:51

【问题描述】：

每当我在 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');
);

【参考方案1】：

问题在于晃动动画的 transform 属性覆盖了 .back 元素的 transform 属性：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');
);