Vue2-Transition组件转场动画的使用1（CSS转场或动画的基本介绍和使用）

1.基本介绍1、组件（1）如果一个元素或组件需要使用转场动画效果，只需使用vue提供的组件将其包装成一个transition组件。（2）Vue只会在插入、更新或移除DOM元素时应用过渡效果，例如：1.v-if（条件渲染）2.v-show（条件显示）3.动态组件4.在根节点上，由vue实例的DOM方法触发。例如，使用appendTo方法向某个根节点添加组件2、转场效果实现方法转场效果的具体实现方法分为以下两种：使用CSS转场或动画实现使用JavaScript钩子函数3、动画执行逻辑封装当一个成为过渡组件的元素被插入或删除时，Vue会做以下事情：首先找出目标元素是否有CSS过渡或动画，如果有则在适当的时候处理。如果过渡组件设置了JavaScript钩子函数，Vue会在相应的阶段调用钩子函数。如果以上都不存在，DOM操作（插入或删除）将立即在下一帧执行。二、结合CSS实现动画效果1、基本用法(1)我们给transition的name属性设置一个值（例如：name="xxx"），那么在组件的transition过程中，会有下面六个CSS类名切换:xxx-enter:进入transition的开始状态，插入元素时生效，申请一帧后立即删除。xxx-enter-active：进入过渡结束状态，元素插入时生效，过渡过程结束后移除。xxx-enter-to：定义进入转换的结束状态。在插入元素后应用下一帧（同时删除xxx-enter），在转换/动画完成后删除。（2.1.8版本新增）xxx-leave：离开transition的开始状态，删除元素时触发，只应用一帧后立即删除。xxx-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。xxx-leave-to：定义离开转换的结束状态。在离开过渡被触发后应用下一帧（同时xxx-leave被移除），在过渡/动画完成后移除。（2.1.8版本新增）(2)下面是一个简单的例子：点击按钮可以显示或隐藏下面的图片（交替）。在显示或隐藏的过程中，会出现淡入淡出的效果。2,自定义转场类名(1)上例中的六个转场类名是根据转场的name属性自动生成的。我们还可以使用enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class、leave-to-class这六个属性分别定义六个类名。(2)自定义过渡类名的优先级高于普通类名，这对于Vue的过渡系统与其他第三方CSS动画库如Animate.css的结合非常有用。切换渲染hello