CSS神属性让动画停留在最后一帧
2018-06-08 本文已影响0人
黄秀杰
这里用到的动画是一个渐隐消失,原代码是这样的
bug.gif.fadeOut {
animation-name: fadeOutAnimation;
animation-duration: 1s;
}
@keyframes fadeOutAnimation {
0% {
opacity: 100%;
}
to {
opacity: 0;
}
}
view {
width: 100%;
height: 300px;
background-color: darksalmon;
}
但播放完毕后,图层又显现了,查文档发现有一个很好的属性animation-fill-mode,可以解决这个问题,
将fadeOut改造成如下即可。
.fadeOut {
animation-name: fadeOutAnimation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
finish.gif
源代码托管在Gitee,需要的朋友可以前往下载,https://gitee.com/dotton/demo-wx
mp