这篇文章主要介绍了关于vue内置组件transition的详解（图文），有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
基本概念
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js
简单用法
用
v-if/v-show控制显示隐藏，使用transition 组件控制其变化过程-
一个页面子组件router-view的消失隐藏，使用transition 组件控制其变化过程
立即学习“前端免费学习笔记（深入）”；
// 子组件
// if/show控制
类名介绍
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官网介绍 下面我平时记载的笔记，结合图文，更容易理解些
变化原理
时尚购物程序v1.01、全立体设计。此系统由3个Flash动画为主线（正式版带原文件），设计更形象，网站更有吸引力。这种设计在网店系统内绝无仅有，使您的网店与众不同。2、内置音乐播放器，简单灵活的操作即可完成设置，前台任意调用。并带详细说明文件，一看就懂。合理使用此功能，可使网站更富渲染力。3、支持多图显示，每件产品最多可以上传9张图片。4、后台功能强大，销售管理，财务管理，在线支付平台管理等功能
![1395472796-5b45c70c4c115_articlex[1].png](https://img.php.cn//upload/image/983/880/676/1531530873410256.png "1531530873410256.png")
![4082005471-5b45c70c665a9_articlex[1].png](https://img.php.cn//upload/image/846/161/378/1531530885557752.png "1531530885557752.png")
动画流程出现：
开始前一帧： 点击出现动画，元素由none变为block，动画开始前一帧，插入
opacity:0属性 “1”，和监听opacity属性变化时间为3s “2”动画第二帧：
opacity:0，属性 “1” 去除，引起“2”监听执行时间变化动画最后一帧： 动画结束，去除所有
![2540033033-5b45c70bf12f3_articlex[1].png](https://img.php.cn//upload/image/519/974/846/1531530898803647.png "1531530898803647.png")
动画流程消失：
开始前一帧： 点击消失动画，元素由block变为none，动画开始前一帧，只插入监听opacity属性变化时间为3s “4”
动画第二帧： 插入，“3” 属性opacity:0引起 “2” 监听执行事件变化
动画最后一帧： 动画结束，去除所有
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
