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

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

一、问题描述

在做一个弹窗动画提示的时候遇到了一个问题:

在动画结束的时候,移除元素时会有闪一下的问题,像这样,有残留的痕迹。

我的动画结尾是这样的:

css 复制代码
  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 卡点删除元素是无法实现很丝滑的效果的。

css 复制代码
.slideOutUpPopMessage {
  -webkit-animation-name: slideOutUpPopMessage;
  animation-name: slideOutUpPopMessage;
  animation-fill-mode: forwards;
}

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

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

这样在之后任意时间移除它就可以了。

三、完整 css

使用的时候:

  1. 元素提前放入 .animated .animated-fase
  2. 在显示的时候添加 .slideInDownPopMessage
  3. 元素显示之后删除 .slideInDownPopMessage
  4. 元素正常显示 n 秒,n 秒过后添加 .slideOutUpPopMessage
  5. 在元素消失之后再用 js 移除当前元素即可。
css 复制代码
.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;
}
相关推荐
麓殇⊙2 小时前
redis--黑马点评--用户签到模块详解
前端·数据库·redis
大雷神3 小时前
站在JS的角度,看鸿蒙中的ArkTs
开发语言·前端·javascript·harmonyos
杨荧9 小时前
基于大数据的美食视频播放数据可视化系统 Python+Django+Vue.js
大数据·前端·javascript·vue.js·spring boot·后端·python
cmdyu_9 小时前
如何解决用阿里云效流水线持续集成部署Nuxt静态应用时流程卡住,进行不下去的问题
前端·经验分享·ci/cd
WordPress学习笔记9 小时前
根据浏览器语言判断wordpress访问不同语言的站点
前端·javascript·html
yuanmenglxb20049 小时前
解锁webpack核心技能(二):配置文件和devtool配置指南
前端·webpack·前端工程化
JefferyXZF9 小时前
Next.js 路由导航:四种方式构建流畅的页面跳转(三)
前端·全栈·next.js
啃火龙果的兔子10 小时前
React 多语言(i18n)方案全面指南
前端·react.js·前端框架
阿奇__10 小时前
深度修改elementUI样式思路
前端·vue.js·elementui
小白白一枚11110 小时前
css的选择器
前端·css