概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
css实现过渡
<transition></transition>这个标签是vue的内置组件，可以直接使用，将需要动画的元素包裹在内，但是实现效果还是得靠css样式来实现，具体动画是这么样的实在哎css样式中写，vue只是提供了这么个框架
其中name属性可以任意起名，但是需要跟css中的类名前面的第一个单词匹配
过渡的类名：xxx-enter-active: 指定显示的transition，xxx-leave-active: 指定隐藏的transition，xxx-enter: 指定隐藏时的样式
css实现过渡动画的简单示例一：当点击按钮切换的时候，css有个这样的切换过程
第一个样式是指定过渡样式，第二个样式是指定隐藏时的样式
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-show="show">i am show</p>
</transition>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active{
transition: opacity 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
css实现过渡动画的简单示例二
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-show="show">i am show</p>
</transition>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active{
transition: opacity 2s ease-out;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
/*进入*/
.fade-enter{
transform: translateY(-500px);
}
/*出去*/
.fade-leave-active{
transform: translateY(500px);
}
</style>
多元素模式接受的过渡状态—v-show的过渡状态／v-if的过渡状态
v-if和v-show的区别在于v-if从dom中去除，v-show只是将dom使用css样式display:none隐藏掉
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<!--mode表示多元素模式，out-in（先出后进）in-out(先进后出)-->
<transition-group name="fade" mode="out-in">
<!--多元素模式下，使用transition-group标签，并且需要一个key来标识-->
<p v-if="show" key="1">i am if</p>
<p v-else key="2">i am show</p>
</transition-group>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active{
transition: opacity 2s ease-out;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<!--mode表示多元素模式，out-in（先出后进）in-out(先进后出)-->
<transition-group name="fade" mode="out-in">
<!--多元素模式下，使用transition-group标签，并且需要一个key来标识，实际开发中这个key一般是数组的下标，最好是用v-bind来绑定-->
<p v-show="show" key="1">i am if</p>
<p v-show="!show" key="2">i am show</p>
</transition-group>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
show: true
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active{
transition: opacity 2s ease-out;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
多元素过渡和多元素过渡模式（接受的过渡状态—动态组件切换的过渡动画）
css实现动画
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Lorem</p>
</transition>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
show: true
}
}
}
</script>
<style>
/*进入过程中的动画*/
.bounce-enter-active {
animation: bounce-in .5s;
}
/*离开过程中的动画*/
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>