Vue.js学习记录-7-Vue进阶:动画特效

8.动画特效

  • CSS过渡动画原理

    在Vue底层中,通过**标签包裹的内部元素会进行自动构建动画流程。即:Vue是通过更换元素上的class**来进行过渡动画效果的呈现的。

    下图是CSS过渡动画(入场动画)的执行流程,离场动画同理。
    Vue.js学习记录-7-Vue进阶:动画特效_第1张图片

    在过渡动画流程中可以看出:包裹的内部元素会在该流程中进行class的添加和去除

    • 初始状态:内部元素添加fade-enter、fade-enter-active
    • 中间状态:内部元素去除fade-enter,添加fade-enter-to
    • 最终状态:内部元素去除fade-enter-active、fade-enter-to

    下面例子中,通过按钮点击事件对show的值进行该**

    元素的显示与否**,method以及data就不做展示了。

      
          
    Hello World

    添加嵌入式的CSS样式

      
    

    设置opacity变量值,通过transition进行监控opacity的值变化,变化后便进行3s的动画过渡效果。

    动画演示:注意在包裹的内部元素的class变化*

    • 入场过渡动画

    Vue.js学习记录-7-Vue进阶:动画特效_第2张图片

    • 离场过渡动画
      Vue.js学习记录-7-Vue进阶:动画特效_第3张图片
      TIPS:标签可以添加name属性,该属性决定了过渡动画所添加的类名。例如:name=“fade”,此时过渡动画

    所添加的class为:fade-enter等。默认不添加name属性时,过渡动画的class默认是:v-enter等,例子中采用的就是默认值。

  • Animate.css库

    Animate.css 一款强大的预设css3动画库

    改造上述例子:加入animate.css动画库。

    • 引入animate.css动画库:

        
      
    • 改造****标签

        
        
        
            
      Hello World
    • 动画效果演示:

      • 入场
        Vue.js学习记录-7-Vue进阶:动画特效_第4张图片

      • 离场
        Vue.js学习记录-7-Vue进阶:动画特效_第5张图片

      • 执行时长:默认的动画执行时长是1s,详情见下图。
        Vue.js学习记录-7-Vue进阶:动画特效_第6张图片

    • Animate.css动画库实际上是采用了CSS3标准下的keyframe规则,创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

  • 过渡和动画特效结合

    仍然是改造上述例子:将过渡动画和animate动画结合使用

    1. 引入嵌入式CSS样式:

       
      
    2. 改造标签内容:

       
       
       
       
       
       
           
      Hello World
    3. 测试效果:

      1. 页面刷新动画
        Vue.js学习记录-7-Vue进阶:动画特效_第7张图片
      2. 入场动画
        Vue.js学习记录-7-Vue进阶:动画特效_第8张图片
      3. 离场动画
        Vue.js学习记录-7-Vue进阶:动画特效_第9张图片
  • Js动画和Velocity.js结合

    在开始本小节内容之前,我们先来了解一下网页的交互动画

    网页交互动画大概分为:CSS动画,Js动画

    • CSS动画:

        由于CSS3可以根据CSS属性自定义动画,所以这类动画的优点就是不用进行计算和更改DOM会显得非常流畅。
        可以通过@keyframes规则创建动画。 @keyframes规则内部指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
      
    • Js动画:

         Js动画拥有强大的性能,并且优于css动画。根据Js来改变属性值,所以没有css那样的局限性,可以实现更多的功能的动画。
      
    • Velocity.js

        Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。
        它能和jQuery完美协作,并和$.animate()有相同的 API,但它不依赖jQuery,可单独使用。 
        Velocity不仅包含了$.animate()的全部功能,还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG动画、滚动动画等特色功能。
        它比$.animate()更快更流畅,性能甚至高于CSS3 animation,是jQuery和CSS3 transition的最佳组合,它支持所有现代浏览器。
      
    • 改造例子

      • 引入Velocity.js

          
        
      • 改造****标签,例子仅展示出场动画。

          
          
          
              
        Hello World
      • methods中添加绑定方法:在handleEnter方法中采用Velocity.js进行了改写

         methods: {
             handleClick: function() {
                 this.show = !this.show
             },
             handleBeforeEnter: function(el) {
                 el.style.color = 'red'
                 el.style.opacity = 0;
             },
             handleEnter: function(el, done) {
                 // setTimeout(() => {
                 //     el.style.color = 'green'
                 // }, 2000)
        
                 // setTimeout(() => {
                 //     done()
                 // }, 4000)
                 // Js动画库 - velocity.js
                     Velocity(el, {
                         opacity: 1
                     }, {
                         duration: 3000,
                         complete: done
                     })
             },
             handleAfterEnter: function(el) {
                 el.style.color = 'green'
                 console.log("动画结束")
             }
         }
        
      • Js动画演示,仅出场动画(点击按钮,红色字样出现,持续三秒,字样颜色变绿色,控制台打印信息,动画流程结束)
        Vue.js学习记录-7-Vue进阶:动画特效_第10张图片

  • 多个元素或组件的过渡

    标签中通过mode属性设置元素切换效果:out-in、in-out

    • 多个元素

        
        
        
            
      Hello World
      Bye World
    • 多个组件

        
        
            
        
      
  • 列表过渡

    列表过渡通过:标签实现,以下通过遍历列表例子说明

    • 使用**标签做列表过渡**

        
        
            
      {{item.title}}
    • 演示列表过渡

      Vue.js学习记录-7-Vue进阶:动画特效_第11张图片

  • 动画封装:采用组件的形式将常用的动画效果进行封装

    例如:将采用Js动画钩子的上述案例进行组件整合如下:

    • 声明全局组件

        Vue.component('fade', {
            props: ['show'],
            template: `
                
                    
                
            `,
            methods: {
                handleBeforeEnter: function(el) {
                    el.style.color = 'red';
                },
                handleEnter: function(el, done) {
                    setTimeout(() => {
                        el.style.color = 'green';
                    }, 2000)
      
                    setTimeout(() => {
                        done();
                    }, 4000)
                },
                handleAfterEnter: function(el) {
                    el.style.color='black';
                    console.log("动画结束");
                }
            }
        })
      
    • DOM中使用该动画组件

        
        	

      Tom and Jerry

你可能感兴趣的:(代码笔记,前端技术学习,Vue.js)