前言

Vue 提供了 transition 的封装组件，任何元素和组件在下列四种情形中，都可以添加进入或离开过渡动画

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

一、transition用法

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

当插入或删除包含在 <transition> 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

<!-- 简单元素 -->
<transition><div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear><component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo"><transition @after-enter="transitionComplete"><div v-show="ok">toggled content</div></transition>
</div>// 方法
methods: {transitionComplete(el) {// 传入'el'这个DOM元素作为参数。}
}

二、transition的属性

常用属性：

name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"

appear: boolean，是否在初始渲染时使用过渡。默认为 false。

css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

mode: string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。

duration: number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

自定义过渡类名属性：

enter-class: string

leave-class: string

appear-class: string

enter-to-class: string

leave-to-class: string

appear-to-class: string

enter-active-class: string

leave-active-class: string

appear-active-class: string

【1】过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，则以你设置的name值作为过渡类名前缀。例如：那么 v-enter 会替换为 my-transition-enter。

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 被删除)，在过渡/动画完成之后移除。

【2】自定义过渡的类名

我们可以通过以下属性来自定义过渡类名，他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

<!-- animate库 -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><!-- 过渡类名name -->
<!-- 自定义过渡类名enter-active-class、leave-active-class -->
<div id="example-3"><button @click="show = !show">Toggle render</button><transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"><p v-if="show">hello</p></transition>
</div>// js
data() {return {show: true}
}

三、transition的事件

<transition name="fade"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave"
><p v-show="show"></p>
</transition>

methods:{beforeEnter(el){console.log('动画enter之前');},enter(el){console.log('动画enter进入');},afterEnter(el){console.log('动画进入之后');},beforeLeave(el){console.log('动画leave之前');},leave(el){console.log('动画leave');},afterLeave(el){console.log('动画leave之后');}
}

四、transition-group

<transition> 是一个抽象组件，且只对单个元素生效。而 <transition-group> 组件实现了列表的过渡，并且它会渲染一个真实的DOM元素节点，默认渲染 <span>，可以通过 tag 属性配置哪个元素应该被渲染。注意，每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作

【1】用法

<transition-group tag="ul" name="slide"><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

【2】transition-group属性

tag: string，默认为 span

move-class: 覆盖移动过渡期间应用的 CSS 类。

除了 mode，其他 attribute 和 <transition> 相同

【3】transition-group事件

事件和 <transition> 相同

五、实例

【1】transiton展开收起侧边栏

<template><button @click="show = !show">{{txt}}</button><transition name="fade"><div class="leftNav" v-show="show">左侧边栏</div></transition>
</template><script>export default {data() {return {show: true,}},computed: {txt() {return this.show ? '收起' : '展开'}},}
</script><style>.leftNav {height: 90vh;width: 200px;background-color: #ccc;}/*设置动画*/.fade-enter,.fade-leave-to {transform: translateX(-100%);}.fade-enter-active,.fade-leave-active {transition: 1s;}.fade-enter-to {transform: translateX(0)}
</style>

【2】transiton-map实现多元素收缩展开

<template><button @click="show = !show">{{txt}}</button><transition-group name="move"><div class="box" v-show="show" key="1">1</div><div class="box" v-show="show" key="2">2</div><div class="box" v-show="show" key="3">3</div><div class="box" v-show="show" key="4">4</div></transition-group>
</template><script>export default {data() {return {show: true,}},computed: {txt() {return this.show ? '收起' : '展开'}},}
</script><style>.move-enter,.move-leave-to {transform: translateX(-100%);}.move-enter-active,.move-leave-active {transition: 1s;}.move-enter-to {transform: translateX(0)}.box {width: 200px;height: 100px;background: #ccc;margin-bottom: 2px;}
</style>

【3】transiton配合animation动画使用

<template><div><button @click="play('topToTop')">从顶部滑入、顶部滑出</button><button @click="play('topToBottom')">从顶部滑入、底部滑出</button><button @click="play('bottomToTop')">从底部滑入、顶部滑出</button><button @click="play('bottomToBottom')">从底部滑入、底部滑出</button><button @click="play('leftToRight')">从左侧滑入、右侧滑出</button><button @click="play('leftToLeft')">从左侧滑入、左侧滑出</button><button @click="play('rightToLeft')">从右侧滑入、左侧滑出</button><button @click="play('rightToRight')">从右侧滑入、左侧滑出</button><div class="view"><transition :name="transName"><div v-show="show" class="block">Element</div></transition></div></div>
</template>
<script>export default {data() {return {transName: '',show: true,}},methods: {play(name) {this.transName = name;this.show = !this.show;}}}
</script>
<style>.view {position: relative;height: 300px;width: 300px;background: gainsboro;overflow: hidden;}.block {position: absolute;height: 100%;width: 100%;text-align: center;color: white;line-height: 300px;background: red;}/*滑入——从顶部*/@keyframes slideIn_top {0% {top: -100%;}100% {top: 0;}}/*滑入——从底部*/@keyframes slideIn_bottom {0% {top: 100%;}100% {top: 0;}}/*滑入——从左侧*/@keyframes slideIn_left {0% {left: -100%;}100% {left: 0;}}/*滑入——从右侧*/@keyframes slideIn_right {0% {left: 100%;}100% {left: 0;}}/*滑出——从顶部*/@keyframes slideOut_top {0% {top: 0;}100% {top: -100%}}/*滑出——从底部*/@keyframes slideOut_bottom {0% {top: 0;}100% {top: 100%}}/*滑出——从左侧*/@keyframes slideOut_left {0% {left: 0;}100% {left: -100%}}/*滑出——从右侧*/@keyframes slideOut_right {0% {left: 0;}100% {left: 100%}}/*(滑入)——从顶部滑入,从顶部滑出*/.topToTop-enter-active {animation: slideIn_top 1s;}/*(滑出)——从顶部滑入,从顶部滑出*/.topToTop-leave-active {animation: slideOut_top 1s;}/*(滑入)——从顶部滑入,从底部滑出*/.topToBottom-enter-active {animation: slideIn_top 1s;}/*(滑出)——从顶部滑入,从底部滑出*/.topToBottom-leave-active {animation: slideOut_bottom 1s;}/*(滑入)——从底部滑入,从顶部滑出*/.bottomToTop-enter-active {animation: slideIn_bottom 1s;}/*(滑出)——从底部滑入,从顶部滑出*/.bottomToTop-leave-active {animation: slideOut_top 1s;}/*(滑入)——从底部滑入,从底部滑出*/.bottomToBottom-enter-active {animation: slideIn_bottom 1s;}/*(滑出)——从底部滑入,从底部滑出*/.bottomToBottom-leave-active {animation: slideOut_bottom 1s;}/*(滑入)——从左侧滑入,从右侧滑出*/.leftToRight-enter-active {animation: slideIn_left 1s;}/*(滑出)——从左侧滑入,从右侧滑出*/.leftToRight-leave-active {animation: slideOut_right 1s;}/*(滑入)——从左侧滑入,从左侧滑出*/.leftToLeft-enter-active {animation: slideIn_left 1s;}/*(滑出)——从左侧滑入,从左侧滑出*/.leftToLeft-leave-active {animation: slideOut_left 1s;}/*(滑入)——从右侧滑入,从左侧滑出*/.rightToLeft-enter-active {animation: slideIn_right 1s;}/*(滑出)——从右侧滑入,从左侧滑出*/.rightToLeft-leave-active {animation: slideOut_left 1s;}/*(滑入)——从右侧滑入,从右侧滑出*/.rightToRight-enter-active {animation: slideIn_right 1s;}/*(滑出)——从右侧滑入,从右侧滑出*/.rightToRight-leave-active {animation: slideOut_right 1s;}
</style>

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

Vue — transition实现过渡动画相关推荐

用css3的transition实现过渡动画
CSS3,用transition实现过渡动画用到了transition就先说说这个属性吧! 一.transition属性简介 transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画 ...
Vue中实现过渡动画
文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...
vue移动端过渡动画_Vue.js实现微信过渡动画左右切换效果
前言需要用到的技术栈:Vue+Vuex 先看看效果图过渡动画示例代码 router.beforeEach(function (to,from,next) { const toIndex = hi ...
vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
Vue | Vue.js 实现过渡动画
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
Android Transition过渡动画
在Android 4.4 Transition 就已经引入了,但在Android 5.0(API 21)之后,Transition 被更多的应用起来.相对于View Animation或Propert ...
【LVGL 学习】样式（style）过渡动画学习
transition:过渡动画当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户.通过过渡动画(transition)可以让样式的改变更自然.例如,按钮在点击时,以及开关在切换时,都具有一小 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...

Vue — transition实现过渡动画

前言