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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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
php基础知识:函数基础知识
2006/12/13 PHP
php xml文件操作代码(一)
2009/03/20 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python读取中文txt文本的方法
2018/04/12 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python实现弹球小游戏
2020/08/01 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
应届生高等护理求职信
2013/10/12 职场文书
英语自我评价范文
2014/01/24 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
工厂标语大全
2014/10/06 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python