vue-三种过度属性

一.transition结合css实现过渡

1.将你想添加过渡效果的元素使用transition包含

 2.必须为这个transition设置名称，这个名称就是你后期的过渡样式的前缀，意味着后期的样式就是以这个名称做为前缀的 

 3./* 添加过渡样式，这个样式的前缀就是之前transition标签中定义的name */

出现

            .name-enter{开始}

            .name-enter-active{过渡}

            .name-enter-to{结束}

离开

            .name-leave{开始}

            .name-leave-active{过渡}

            .name-leave-to{结束}

二.transition结合animate.css实现过渡

1..将你想添加过渡效果的元素使用transition包含

2.在transition中两个属性:

1. enter-active-class:控制动画的进入

2.leave-active-class:控制动画的离开

注意

1.两个属性中均要编写 animate.css中定义号的一个类 animated

2.在两个属性中分别取animate.css中控制的动画样式即可

例如

 enter-active-class='animated zoomIn'

 leave-active-class='animated zoomOut'

三.transition结合钩子函数实现过渡