当 show 属性变化时，Vue 会依据其当前的值来插入/移除 <div> 元素，并在合适的时机添加/移除对应的 CSS 类，具体如下：
当 show 变为 false 时，Vue 将会：
1.调用 beforeLeave 钩子；
2.在元素上应用 CSS 类 .v-leave 来触发过渡效果；
3.调用 leave 钩子；
4.等待过渡效果执行完毕； (监听 transitionend 事件)
5.从 DOM 中移除元素并且移除 CSS 类 .v-leave。
6.调用 afterLeave 钩子。
当 show 为 true 时，Vue 将会：
1.调用 beforeEnter 钩子；
2.在元素上应用 CSS 类 .v-enter；
3.将元素插入 DOM；
4.调用 enter 钩子；
5.应用 .v-enter 类, 然后强制 CSS 布局以保证 .v-enter 生效；最后移除 .v-enter 来触发元素过渡到原本的状态。
6.等待过渡效果执行完毕；
7.调用 afterEnter 钩子。
此外，如果一个正在执行进入的过渡效果的元素在过渡还未完成之前就被移除，则 enterCancelled 钩子将会被执行。这个钩子可以用于清理工作，比如移除在 enter 时创建的计时器。对于正在离开过渡中又被重新插入的元素同理。
上述所有的钩子函数执行时，其 this 都指向相应的 Vue 实例。如果一个元素本身是一个 Vue 实例的根节点，则此实例将被应用为 this；否则 this 指向该过渡指令所属的实例。
最后，enter 与 leave 钩子函数可以接受可选的第二个参数：一个回调函数。当你的函数签名中含有第二个参数时，即表示你期望使用此回调来显式地完成整个过渡过程，而不是依赖 Vue 去自动检测 CSS 过渡的 transitionend 事件。比如：
enter: function (el) {
// 无第二个参数
// 过渡效果的结束由 CSS 过渡结束事件来决定
}
VS
enter: function (el, done) {
// 有第二个参数
// 过渡效果结束必须由手动调用 `done` 来决定
}
当多个元素同时执行过渡效果时，Vue.js 会进行批量处理以保证只触发一次强制布局。
CSS 动画
CSS 动画通过与 CSS 过渡效果一样的方式进行调用，区别就是动画中 .v-enter 类并不会在节点插入 DOM 后马上移除，而是在 animationend 事件触发时移除。
示例： (省略了兼容性前缀)
<span v-show=”show” v-transition=”bounce”>Look at me!</span>
.bounce-enter {
animation: bounce-in .5s;
}
.bounce-leave {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
