当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理:
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名;
2.如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用;
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行。
template代码：
<template> <div class="app"> <div> <button @click="isShow = !isShow">显示/隐藏</button> </div> <transition name="why" type="transition" :duration="{enter:800,leave:1000}"> <h2 v-if="isShow">hello world</h2> </transition> </div></template>
css代码：
.app {
width: 200px;
margin: 0 auto;
}
h2 {
display: inline-block;
}.why-enter-form,.why-leave-to { opacity: 0;}.why-enter-active,.why-leave-active { transition: opacity 1s ease;}.why-enter-active { animation: bounce 1s ease;}.why-leave-active { animation: bounce 1s ease reverse;}@keyframes bounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }}
