Question

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

我已经组成了一个jsfiddle来证明这个问题。

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');
});

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

1 个答案: