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%);
}
可以看到结尾的时候已经是 hidden 的状态了,按理说应该不会再显示原来的状态。
二、原因和解决
其实这是里少了一个定义动画的属性,定义动画结束之后是保留动画后的状态,还是回到原来的状态,默认是恢复到原来的状态。
像上面这个例子,在动画结束的时候就立即恢复到原来可见的状态,js 来不及移除。用 js 卡点删除元素是无法实现很丝滑的效果的。
.slideOutUpPopMessage {
-webkit-animation-name: slideOutUpPopMessage;
animation-name: slideOutUpPopMessage;
animation-fill-mode: forwards;
}
需要在动画的 class 上添加这样一个属性: animation-fill-mode
,意思是结束之后保留哪个状态。
forwars 就是保留动画结束后的状态,比如上面例子结束之后元素处于 hidden 的状态,这样即使没有用 js 移除这个元素,它也是不可见的。
这样在之后任意时间移除它就可以了。
三、完整 css
使用的时候:
- 元素提前放入
.animated
.animated-fase
- 在显示的时候添加
.slideInDownPopMessage
- 元素显示之后删除
.slideInDownPopMessage
- 元素正常显示 n 秒,n 秒过后添加
.slideOutUpPopMessage
- 在元素消失之后再用 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;
}