vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡

lxf2024-04-04 04:00:24

  (1)无论是组件之间的切换,或者用v-if,v-show指令控制dom的显示,只要是你想实现动画效果,必须在外面包裹,且必定给一个name属性,用于指定使用定义好的动画

  (2)开始进行定义动画,因为前面的name是fade,所以后面的动画定义的类名,必须按照fade开头。

  (3)实现效果

  vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡

  (1)还是使用transiton包裹,也给一个name,但是在css定义动画有所不同。 keyframe动画与过渡动画不同点在于,keyframe是一种插帧动画,我们可以定义在不同帧时候的动画,这里我们只在0%,50%,100%处定义,大家可以在中间多定义一些

  (2)定义动画

  (3)实现效果

  vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡

  (1)之前都是使用name=“fade”,定义动画时候写一大堆,我们当然可以反过来,在name里面写一大堆,在定义时候写少一点。并且使用animate.css必须这样写。

  ①transition标签里面这样写

  ②定义动画这样写

  效果和之前一模一样

  (2)学会怎么改写name之后,我们可以使用animate.css库,这里说明以下,animate.css是属于用@keyframe动画一种,不是使用的过渡动画。

  ①引入库,我是采用CDN方式

  ②在transition标签中使用

  animated必写,后面是动画的类型

  使用trasition-group就好啦

  结果

  vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡