Vue封装的过渡与动画

一、不使用Vue封装的动画效果

实现步骤:

  1. 首先在template标签里面准备html结构,控制动画的按钮和需要做动画的元素
  2. 在script标签里面定义一个关键帧@keyframes,里面书写要实现的动画
  3. 有了动画得使用,可以通过类名去给标签元素添加动画,所以需要定义两个样式类名通过animation属性来控制动画效果
  4. 最后给元素绑定类名,通过动态的使用回调来控制类名的切换

代码示例:





二、使用Vue封装的动画效果

要求:

  1. 想要哪个元素发生动画,就使用transition标签包裹起来这个元素
  2. 如果定义了关键帧@keyframes,控制动画效果的类名不能乱写,必须写成v-enter-active、v-leave-active,此时类名也不要写在标签元素里面了

注意:

  1. transition标签都可以有一个name属性,当使用name属性之后,控制动画的类名就不能是v-k开头了,得写成name的值-enter-active,继续使用v-开头不会报错,但是动画效果没了
  2. 打开页面刷新不会有动画效果,只有点击按钮才会有动画效果,此时,如果想要一刷新页面就产生动画效果,可以使用appear属性

代码示例:





三、使用Vue封装的过渡效果

首先要知道Vue给我们准备几个样式:

  • 元素进入的样式:
            1. v-enter:进入的起点
            2. v-enter-active:进入过程中
            3. v-enter-to:进入的终点
  • 元素离开的样式:
            1. v-leave:离开的起点
            2. v-leave-active:离开过程中
            3. v-leave-to:离开的终点

假如我们要实现以上相同的动画效果,首先我们要在样式里面写相应的过渡效果,以及在需要做动画的标签样式里面写上过渡的时间。

示例代码:

观察一下会发现,添加过渡时间在元素标签内会破坏原有的标签样式,进入的起点和离开的终点是相同的,进入的终点和离开的起点是相同的,所以上面的样式代码可以优化一下,优化后代码如下:

四、使用Vue封装多个元素过渡

以上的代码示例说的都是单个元素的过渡,但是在正常开发当中,多个元素过渡使用居多,现在我们来一起看看多个元素过渡如何封装,其实很简单。使用标签包裹着多个元素,但是这样子还是不行会报错,此时还需要给每个元素加上不同的key属性值才可以。

示例代码:

   
      

我是动画效果

我是动画效果

五、使用集成第三方动画库来实现动画效果

推荐一个npm上的animate.css动画库:

Vue封装的过渡与动画_第1张图片

 使用步骤:

  1. 安装动画库:npm install animate.css
  2. 在要使用的组件内引入库:import 'animate.css'
  3. 复制类名"animate__animated animate__bounce"到transition标签的name属性
  4. 复制进入动画的类名到enter-active-class属性,复制退出动画的类名到leave-active-class属性,就可以实现动画了

示例代码:





效果展示:

 六、总结

Vue封装的过渡与动画

  1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
  2. 写法:

       1. 准备好样式:

          - 元素进入的样式:
            1. v-enter:进入的起点
            2. v-enter-active:进入过程中
            3. v-enter-to:进入的终点
          - 元素离开的样式:
            1. v-leave:离开的起点
            2. v-leave-active:离开过程中
            3. v-leave-to:离开的终点

       2. 使用包裹要过度的元素,并配置name属性:
         
              

    你好啊!


         

  3. 备注:若有多个元素需要过度,则需要使用:``````,且每个元素都要指定```key```值。

Vue封装的过渡与动画_第2张图片

你可能感兴趣的:(#,Vue学习笔记,前端,javascript,vue.js,vue,html)