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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
短信提示使用 特效
2007/01/19 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
Python变量作用范围实例分析
2015/07/07 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Linux文件系统类型
2012/02/15 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
医院信息公开实施方案
2014/05/09 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
车辆委托书范本
2014/10/05 职场文书
企业战略合作意向书
2015/05/08 职场文书
小学语文教师研修日志
2015/11/13 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书