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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
关于Javascript 的 prototype问题。
Jan 03 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
多广告投放代码 推荐
2006/11/13 Javascript
javascript动画浅析
2012/08/30 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
js实现录音上传功能
2019/11/22 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python中有趣在__call__函数
2015/06/21 Python
名片管理系统python版
2018/01/11 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python语音识别实践之百度语音API
2018/08/30 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python中一些深不见底的“坑”
2019/06/12 Python
PyTorch中permute的用法详解
2019/12/30 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
物业保安员岗位职责制度
2014/01/30 职场文书
移交协议书
2014/08/19 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
python区块链实现简版工作量证明
2022/05/25 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS