vue动画和组件

1.过渡
（1）transition 标签为一个抽象组件，用于包裹过渡元素及触发过渡行为。v-if、v-show 等指令仍旧标记在内容元素上，并不会作用于
transition 标签上。
1．name
自动生成对应的name-enter, name-enter-active 类名。

  <transition name='slide-fade'>
 </transition>

对应的类名为：

slide-fade-enter
slide-fade-leave-to
slide-fade-enter-active
slide-fade-leave-active

2．appear
元素首次渲染的时候是否启用transition，默认值为false。即v-if 绑定值初始为true 时，
首次渲染时是否调用transition 效果。
3．type
设置监听CSS 动画结束事件的类型。
4．mode
控制过渡插入/ 移除的先后顺序，主要用于元素切换时。可供选择的值有“out-in”,“in-out”，如果不设置，则同时调用。
5．钩子函数
enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass,appearActiveClass，可以分别自定义各阶段的class 类名。
用transition 标签并设定其属性来定义一个过渡效果

<transition
　 name="fade"
　 mode="out-in"
　 appear
　 @before-enter="beforeEnter"
　 @enter="enter"
　 @after-enter="afterEnter"
　 @appear="appear"
　 @before-leave="beforeLeave"
　 @leave="leave"
　 @after-leave="afterLeave"
　 @leave-cancelled="leaveCancelled"
　 >
　　 <div class="content" v-if="ok">{
  { ok }}</div>
</transition>

（2）类名
1.enter-active 和leave-active，用于分离元素本身