vue内置组件transition简单原理图文详解(小结)


Posted in Javascript onJuly 12, 2018

基本概念

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

简单用法

  • v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程
  • 一个页面子组件 router-view 的消失隐藏,使用transition 组件控制其变化过程
<template>
// 子组件
	<transition name="fade1">
 	<router-view></router-view>
	</transition>
// if/show控制
	<transition name="fade2">
 	<div v-show="isTage"></div>
	</transition>
</template>

类名介绍

  1. v-enter :定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
  2. v-enter-active :定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. v-enter-to : 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  5. v-leave-active :定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to : 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

以上为vuejs官网介绍 下面我平时记载的笔记,结合图文,更容易理解些

变化原理

vue内置组件transition简单原理图文详解(小结) 

vue内置组件transition简单原理图文详解(小结) 

动画流程出现:

开始前一帧: 点击出现动画,元素由none变为block,动画开始前一帧,插入 opacity:0 属性 “1” ,和监听opacity属性变化时间为3s “2”

动画第二帧: opacity:0 ,属性 “1” 去除,引起**“2”**监听执行时间变化

动画最后一帧: 动画结束,去除所有

vue内置组件transition简单原理图文详解(小结)

 动画流程消失:

开始前一帧: 点击消失动画,元素由block变为none,动画开始前一帧,只插入监听opacity属性变化时间为3s “4”

动画第二帧: 插入, “3” 属性opacity:0引起 “2” 监听执行事件变化

动画最后一帧: 动画结束,去除所有

平时功能加个过渡动画看着两个图足够了

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

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 #Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
Vue.js实现的计算器功能完整示例
Jul 11 #Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 #Javascript
JS实现动态生成html table表格的方法分析
Jul 11 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
浅析Python requests 模块
2020/10/09 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
请解释在new与override的区别
2012/10/29 面试题
德语专业求职信
2014/03/12 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
车辆挂靠协议书
2016/03/23 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS