原文链接：knife.blog.csdn.net/article/det…
前言
本文用示例介绍Vue.js的过渡与动画的用法。即：transition标签。
官网
过渡基础
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter
注意
v-enter-to，v-leave一般不写。原因是：按照一般的过渡效果（动画），进入的最后状态就是元素本身的样式，离开的最初状态也是元素本身的样式，所以是没有必要写的。
v-enter, v-leave-to中的css一般相同，一个是进入时过渡（动画）的初始样式，一个是离开过渡（动画）结束时的样式。
v-enter-active ，v-leave-active 中的css一般相同，一般都是用于定义过渡（动画）的过程时间，延迟和曲线函数。当然离开的过渡（动画）的过程时间，延迟和曲线函数和进入的可以是不同的。
实例一：移入移出的案例（元素进来的时候可以"从右往左"滑进来）
<template>
<div class="compA">
<button @click="toggle">Toggle</button>
<transition name="slide-fade">
<h1 v-show="show">显示测试</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show;
}
}
}
</script>
<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.5s ease-out;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(80px); //translateX 向X轴平移,填正数往右平移,填负数,往左平移
opacity: 0;
}
</style>
实例二：淡入淡出的案例
<template>
<div class="compA">
<button @click="toggle">Toggle</button>
<transition name="fade">
<h1 v-show="show">显示测试</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show;
}
}
}
</script>
<style scoped>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-to, .fade-leave {//可以省略
opacity: 1;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1.5s
}
</style>
实例三：配合animation实现一个放大缩小的动画
<template>
<div class="compA">
<button @click="toggle">Toggle</button>
<transition name="bounce">
<h1 v-show="show">显示测试</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show;
}
}
}
</script>
<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>
