企业网站建设培训,应用最广网站建设技术,强的小企业网站建设,wordpress 首页关键词css animation 动画如何保留动画结束后的状态 animation-fill-mode: forwards 一、问题描述 在做一个弹窗动画提示的时候遇到了一个问题#xff1a; 在动画结束的时候#xff0c;移除元素时会有闪一下的问题#xff0c;像这样#xff1a; 我的动画结尾是这样的#xff…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; }