开发技术前端

重新播放CSS动画

对于做前端动画的同学来说，动画库Animate.css并不陌生。我们往往希望一个动画能够重复播放，首先以一个简单的动画shake为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

我们通过调整CSS来使某一个元素左右抖动起来，比如div#banner框，如下：

1
2
3
<div id="banner" class="banner">
Hello Banner!
</div>

可以按照如下方式来添加CSS类

1
$("#banner").addClass("animated shake");

这个时候其实这个元素的CSS类就变化为了banner animated shake这三个css类了，所以再次执行这个函数是没有动画产生的。

那么你可能会想，为什么不通过删除CSS类，然后重新添加来实现呢？试一下：

1
2
// won't work at all
$("#banner").removeClass("animated shake").addClass("animated shake");

是的，完全不会奏效。因为添加操作和删除操作的时间间隔太短了，其实中间可以加一个很小的时间间隔都可以的，但是我们还有更优秀的实现方式，通过从文档树中移除这个元素并重新添加回来而达到这个效果，具体逻辑如下：

1
2
3
4
var temp = $("#banner").clone(true);
// 注意当前元素要放在克隆元素的后面，因为后面使用了`:last`选择器
$("#banner").after(temp);
$("#banner:last").remove();

博主在自己的登录页面使用这个效果，当用户输错用户名和密码的时候就会摇头：

参考文章：https://css-tricks.com/restart-css-animation/

分享到