(1)无论是组件之间的切换,或者用v-if,v-show指令控制dom的显示,只要是你想实现动画效果,必须在外面包裹,且必定给一个name属性,用于指定使用定义好的动画
(2)开始进行定义动画,因为前面的name是fade,所以后面的动画定义的类名,必须按照fade开头。
(3)实现效果
(1)还是使用transiton包裹,也给一个name,但是在css定义动画有所不同。 keyframe动画与过渡动画不同点在于,keyframe是一种插帧动画,我们可以定义在不同帧时候的动画,这里我们只在0%,50%,100%处定义,大家可以在中间多定义一些
(2)定义动画
(3)实现效果
(1)之前都是使用name=“fade”,定义动画时候写一大堆,我们当然可以反过来,在name里面写一大堆,在定义时候写少一点。并且使用animate.css必须这样写。
①transition标签里面这样写
②定义动画这样写
效果和之前一模一样
(2)学会怎么改写name之后,我们可以使用animate.css库,这里说明以下,animate.css是属于用@keyframe动画一种,不是使用的过渡动画。
①引入库,我是采用CDN方式
②在transition标签中使用
animated必写,后面是动画的类型
使用trasition-group就好啦
结果