vue内置组件——transition简单原理图文详解
基本概念
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>
类名介绍
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
以上为vuejs官网介绍 下面我平时记载的笔记,结合图文,更容易理解些
变化原理
动画流程出现:
- 开始前一帧: 点击出现动画,元素由none变为block,动画开始前一帧,插入
opacity:0
属性 “1”,和监听opacity属性变化时间为3s “2” - 动画第二帧:
opacity:0
,属性 “1” 去除,引起“2”监听执行时间变化 - 动画最后一帧: 动画结束,去除所有
动画流程消失:
- 开始前一帧: 点击消失动画,元素由block变为none,动画开始前一帧,只插入监听opacity属性变化时间为3s “4”
- 动画第二帧: 插入,“3” 属性opacity:0引起 “2” 监听执行事件变化
- 动画最后一帧: 动画结束,去除所有
平时功能加个过渡动画看着两个图足够了
原创文章,转载请注明原文链接http://blog.wwenj.com/index.p...
vue内置组件——transition简单原理图文详解的更多相关文章
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- vue内置组件 transition 和 keep-alive 使用
1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- MapReduce 1工作原理图文详解
MapReduce工作原理图文详解 一 MapReduce程序执行流程 程序执行流程图如下: 流程分析:1.在客户端启动一个作业.2.向JobTracker请求一个Job ID.3.将运行作业所需要的 ...
- MapReduce工作原理图文详解 (炼数成金)
MapReduce工作原理图文详解 1.Map-Reduce 工作机制剖析图: 1.首先,第一步,我们先编写好我们的map-reduce程序,然后在一个client 节点里面进行提交.(一般来说可以在 ...
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- thinkPHP内置字符串截取msubstr函数用法详解
作者:陈达辉 字体:[增加 减小] 类型:转载 时间:2016-11-15 我要评论 这篇文章主要介绍了thinkPHP内置字符串截取函数用法,结合实例形式分析了thinkPHP内置的字符串截取函数功 ...
- vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- LVS-DR工作原理图文详解
为了阐述方便,我根据官方原理图另外制作了一幅图,如下图所示:VS/DR的体系结构: 我将结合这幅原理图及具体的实例来讲解一下LVS-DR的原理,包括数据包.数据帧的走向和转换过程. 官方的原理说明:D ...
随机推荐
- 小陈现有2个任务A,B要完成,每个任务分别有若干步骤如下 一道网上没啥题解的难题(至少我是这么觉得的)
小陈现有2个任务A,B要完成,每个任务分别有若干步骤如下:A=a1->a2->a3,B=b1->b2->b3->b4->b5.在任何时候,小陈只能专心做某个任务的一 ...
- Linux 系统下文件夹与文件的读写可执行权限问题
linux是一个多用户操作系统,linux对文件系统内的所有文件,实行了严格的权限划分管理.防止没有权限的用户访问某个文件.linux文件或目录的权限分为 读.写.可执行三种权限.文件访问的用户类别分 ...
- (转)运行pip报错:Fatal error in launcher: Unable to create process using '"'
转:https://blog.csdn.net/cjeric/article/details/73518782 在新环境上安装python的时候又再次遇到了这个情况,这次留意了一下,发现原来的文章有错 ...
- openlayers筛选图层
很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
- chrome 手机端滑动列表的时候控制台会出现很多提示的解决办法
问题: Unable to preventDefault inside passive event listener 可以加入touch-action 属性,具体参照MDN, https://deve ...
- ubuntu 虚拟机安装vmware tools
1.打开ubuntu虚拟机,点击“虚拟机”---> "安装 vmware tools" 2.进入vmware tools光盘,将VMwaretools压缩包复制粘贴到桌面 ...
- iframe父窗口和子窗口的调用方法
iframe 父窗口和子窗口的调用方法父窗口调用子窗口 iframe_name.iframe_document_object.object_attribute = attribute_value 例子 ...
- SEC7 - MySQL 查询语句--------------进阶3:排序查询
# 进阶3:排序查询 /* 引入: select * from employees; 语法: select 查询列表 from 表 [where 筛选条件] order by 排序的列表 asc/de ...
- 解决BootstrapTable设置height属性后,表格不对齐的问题
解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920 一般在使用BootstrapTable 插件 ...
- 10 (H5*) js第10天 正则表达式、深浅拷贝
目录: 1:浅拷贝 2: 深拷贝 3:遍历DOM树 4:正则表达式 5:正则表达式的创建方式 6:字符串中的正则表达式 7:真数组和伪数组 8: escape()和unescapt() 编码和 解 ...