css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards

css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards

一、问题描述

在做一个弹窗动画提示的时候遇到了一个问题：
在动画结束的时候，移除元素时会有闪一下的问题，像这样，有残留的痕迹。

我的动画结尾是这样的：

  from {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
  }

  to {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
  }
1
2
3
4
5
6
7
8
9
10
11

可以看到结尾的时候已经是 hidden 的状态了，按理说应该不会再显示原来的状态。

二、原因和解决

其实这是里少了一个定义动画的属性，定义动画结束之后是保留动画后的状态，还是回到原来的状态，默认是恢复到原来的状态。
像上面这个例子，在动画结束的时候就立即恢复到原来可见的状态，js 来不及移除。用 js 卡点删除元素是无法实现很丝滑的效果的。

.slideOutUpPopMessage {
  -webkit-animation-name: slideOutUpPopMessage;
  animation-name: slideOutUpPopMessage;
  animation-fill-mode: forwards;
}
1
2
3
4
5

需要在动画的 class 上添加这样一个属性： animation-fill-mode ，意思是结束之后保留哪个状态。

forwars 就是保留动画结束后的状态，比如上面例子结束之后元素处于 hidden 的状态，这样即使没有用 js 移除这个元素，它也是不可见的。
这样在之后任意时间移除它就可以了。

三、完整 css

使用的时候：

1. 元素提前放入 .animated .animated-fase
2. 在显示的时候添加 .slideInDownPopMessage
3. 元素显示之后删除 .slideInDownPopMessage
4. 元素正常显示 n 秒，n 秒过后添加 .slideOutUpPopMessage
5. 在元素消失之后再用 js 移除当前元素即可。

.animated{
  animation-duration: .51s;
}

.animated-fast{
  animation-duration: .15s;
}


@-webkit-keyframes slideInDownPopMessage {
  from {
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
    visibility: visible;
    opacity: 1;
  }
}

@keyframes slideInDownPopMessage {
  from {
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
    visibility: visible;
    opacity: 1;
  }
}

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


@-webkit-keyframes slideOutUpPopMessage {
  from {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
  }

  to {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
  }
}

@keyframes slideOutUpPopMessage {
  from {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
  }

  to {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
  }
}

.slideOutUpPopMessage {
  -webkit-animation-name: slideOutUpPopMessage;
  animation-name: slideOutUpPopMessage;
  animation-fill-mode: forwards;
}


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82