Vue中CSS动画原理的实现


Posted in Javascript onFebruary 13, 2019

下面这段代码,是点击按钮实现hello world显示与隐藏

<div id="root">
  <div v-if="show">hello world</div>
  <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    }
  }
})

此时有一个需求,希望是在显示与隐藏时,能实现渐隐渐现的动画效果。

<div id="root">
  <transition name="fade">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    }
  }
})

如果希望hello world有一个动画效果的话,需要在外面套一层transition标签,意思它包裹的内容,有一个动画效果,可以给它一个名字name="fade"。

enter

当一个元素被transition标签包裹之后,Vue 会自动的分析元素的css样式,然后构建动画流程

Vue中CSS动画原理的实现

在动画还没有执行的一瞬间,Vue 会帮我们在dom标签上添加两个class,分别是fade-enter、fade-enter-active。

当动画第一帧执行结束之后,transition这个标签分析过,里面有一个动画效果,Vue 会在动画运行到第二帧的时候,会将dom标签上v-enter的class删除,再添加一个v-enter-to的class。

接着动画会继续执行,执行到结束的一瞬间,Vue 会干一件事,它会把之前添加的v-enter-to和v-enter-active都删除,

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: opacity 3s;
}
<div id="root">
  <transition name="fade">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    }
  }
})

我们只需要在css中给fade-enter和fade-enter-active分别写上样式就行了。这里要注意的是 Vue 中默认以v开头,如:v-enter,transition加个name属性,就可以用name属性值做开头,如:fade-enter。

现在这里两个class的意思是:
动画还没执行时,就已经有fade-enter,fade-enter-active,动画第一帧运行时fade-enter就会被移除,css效果opacity: 0就会变成opacity: 1,直到动画执行完fade-enter-active才会被移除,这期间它用transition对opacity进行监控,需要3s才能完成。

Vue中CSS动画原理的实现

leave

隐藏的动画流程:

隐藏的第一个瞬间时,Vue 会在dom上添加两个class,分别是v-leave和v-leave-active

运行到第二帧时,Vue 会将v-leave移除,再添加一个v-leave-to

接着动画会继续执行,执行到结束的一瞬间,Vue 会把之前添加的v-leave-to和v-leave-active都删除。

.fade-leave-to{
  opacity: 0;
}
.fade-leave-active{
  transition: opacity 3s;
}
<div id="root">
  <transition name="fade">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    }
  }
})

为什么加了这两个css动画效果就出来了呢?

从动画执行的第一个瞬间,到动画执行完毕,fade-leave-active这个class都存在。也就是在动画运行过程中,我要时刻监听div的opacity,一旦opacity发生变化,我要让让他在3s内执行完毕。

在第一个瞬间fade-leave的opacity为1,就是显示状态;第二个瞬间opacity为0了,此时要给它添加一个fade-leave-to的class,而fade-leave-active一直在监听opacity的变化,一旦opacity发生变化,会让它在3s内完成

自定义class

如果我不想用 Vue 提供的这六个class,我想自定义一个class,该怎么实现呢?

.active,.leave{
  transition: opacity 3s;
}

Vue 给我们提供了一个自定义的属性的方法,使用enter-active-class就能自定义一个enter类;使用leave-active-class就用自定义一个leave类。

<transition name="fade" 
  enter-active-class="active"
  leave-active-class="leave"
  <div v-if="show">hello world</div>
</transition>

利用这个特性,在项目中需使用复杂的css样式时,就可以引入第三方css样式库,这里介绍一个animate.css的库。

使用第三方库(animate.css),需要注意两点:

  1. 必须使用自定义class的方式
  2. 自定义class中必须有一个animated的class
<transition name="fade" 
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  <div v-if="show">hello world</div>
</transition>

上面是按钮点击了才会出现动画效果,但此时需求想要实现一入场就有动画效果该怎么实现呢?

<transition name="fade" 
  appear         // 加上 appear 属性
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"  //使用自定义属性 appear-active-class 就可以实现
  <div v-if="show">hello world</div>
</transition>

如需要在一进入就有动画,需要借助两个自定义属性:appear、appear-active-class来实现,看上面代码。

过渡transition和动画animation同时使用

当同时使用transition和animation动画时,动画时长是由谁来确定呢?

Vue 提供了可手动设置,看下面代码

<transition name="fade"
  type="transition"    //可手动设置动画时长以 transition 为准
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

在transition标签中,可以使用type属性,它的用途是:如果同时有transition和animation时,此时将type设置为transition,它就以transition动画时长为准。

回到代码,现在需要自己定义动画的时长,该怎么实现呢?

<transition name="fade"
  :duration="10000"    //动画总时长为 10s
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

Vue 提供了duration的属性,可以自定义动画时长。

这个自定义动画时长,还可以设置的复杂一点:

<transition name="fade"
  :duration="{enter:5000,leave:10000}"    //可分别设置 enter 动画时长和 leave 动画时长
  appear
  enter-active-class="animated swing"
  leave-active-class="animated shake"
  appear-active-class="animated swing"
  <div v-if="show">hello world</div>
</transition>

最后

在transition标签中中不光v-if能控制显示隐藏,v-show也能控制显示隐藏,甚至动态组件也行。只要在transition中标签中动画发生变化,都会有一个过渡效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 #Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 #Javascript
node.js微信小程序配置消息推送的实现
Feb 13 #Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 #Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
vuex实现的简单购物车功能示例
Feb 13 #Javascript
jquery无缝图片轮播组件封装
Nov 25 #jQuery
You might like
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python 修改列表中的元素方法
2018/06/26 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
环境科学专业研究生求职信
2013/10/02 职场文书
档案管理员岗位职责
2013/12/01 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
公证书
2019/04/17 职场文书