transition的基本使用
对要使用动画的单个组件使用transition标签包裹，并为transition标签定义一个name：
<transition name="sk">
<h2 v-if="isShow">hello world</h2>
</transition>根据name的名称去style中定义样式，以name-为开头的一系列class：
<style scoped>
.sk-enter-from,
.sk-leave-to{
opacity: 0;
}
.sk-enter-to,
.sk-leave-from{
opacity: 1;
}
.sk-enter-active,
.sk-leave-active{
transition: opacity 2s ease;
}
</style>如果在transition中不指定name，以上的class都以v-开头，如v-enter-from
animation帧动画
依旧是在style中的class中使用样式，不过animation只在-active中就能完成这个功能：
<style scoped>
.sk-enter-active{
animation: bounce 1s ease
}
.sk-leave-active{
animation: bounce 1s ease reverse
}
@keyframes bounce {
0%{
transform: scale(0);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
</style>transition的属性
transition动画和animation动画可以同时使用。当transition和animation的持续时间不一致时，type属性指定了动画的持续事件依据transition或animation的时间。
<transition name="sk" type="transition">
<h2 class="title" v-if="isShow">hello world</h2>
</transition>
// 或
<transition name="sk" type="animation">
<h2 class="title" v-if="isShow">hello world</h2>
</transition>duration属性指明了整个动画的持续时间，并忽略style中定义的时间：
<transition name="sk" :duration="1000">
<h2 class="title" v-if="isShow">hello world</h2>
</transition>
// 或
<transition name="sk" :duration=="{enter: 800, leave:1000}">
<h2 class="title" v-if="isShow">hello world</h2>
</transition>mode属性用于transition中有多个元素的情况，mode有两个可取值：in-out是先执行进入动画、再执行退出动画；out-in是先执行退出动画、再执行进入动画。
<transition name="sk" mode="out-in">
<h2 class="title" v-if="isShow">hello world</h2>
<h2 class="title" v-else>hello animation</h2>
</transition>在transition中显示组件需要用到动态组件<component>：
<transition name="sk" mode="out-in">
<component :is="isShow ? 'home':'about'"></component>
</transition>appear属性：如果需要第一次进入时也显示动画，需要将appear设置为true（默认是false）：
<transition name="sk" mode="out-in" :appear="true">
<component :is="isShow ? 'home':'about'"></component>
</transition>