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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JavaScript中Function详解
Feb 27 Javascript
常用jQuery代码分享
Jul 14 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
vuex的简单使用教程
Feb 02 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
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实现获取及设置用户访问页面语言类
2014/09/24 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python实现CET查分的方法
2015/03/10 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
高级电工工作职责
2013/11/21 职场文书
2014政务公开实施方案
2014/02/19 职场文书
违纪检讨书
2015/01/27 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python