Vue实战项目开发--Vue中的动画特效

项目的源代码在GitHub上：点击查看

目录

vue中的css动画原理

在Vue中使用Animate.css库

在Vue中同时使用过渡属性和动画

Vue中的Js动画与Velocity.js的结合

Vue中多个元素或组件的过渡

vue中的列表过渡

vue中的动画封装

vue中的动画特效--总结

---

vue中的css动画原理

需要实现动画效果的标签需要包裹

    
    
    
    



    

        
            
hello world
        
        切换
    

    

注意：这里的v-if也可以用v-show代替。vue的动画效果的原理是CSSs中的transition属性

还有就是没有设置name属性，那么默认为v-enter、v-enter-active和v-leave、v-leave-to

在Vue中使用Animate.css库

 

• 必须使用class自定义名字的方式（enter-active-class="animated swing"，必须添加animated，然后第二个参数是动画效果的名字），来使用animate.css库
• 必须引入animate.css库文件（下载地址：animate.css库文件地址）

    
    
    
    
    



    

        
            
hello world
        
        toggle
    

    

在Vue中同时使用过渡属性和动画

• 通过appear实现页面的初次动画
• 如何既使用animate.css的动画也使用transition过渡（文档：transition的使用）
• 当两个动画同时使用时以谁的动画时间为准，定义type来确定；除此还可以自定义动画时长

   注意：不明白怎么使用的，一定要看文档

    
    
    
    
    
    



    

        
        
        
            
hello world
        
        toggle
    

    

Vue中的Js动画与Velocity.js的结合

    
    
    
    



    

        
            
hello world
        
        toggle
    

    

• 使用vue中的js钩子来实现js动画效果(js钩子：JavaScript钩子)
• velocity.js动画库实现动画效果（官网：velocity.js）

其中：before-enter、enter、after-enter就是vue中的js钩子，查看更多就点击上面链接

注意：不明白怎么使用的，一定要看文档

Vue中多个元素或组件的过渡

    
    
    
    



    

        //多个元素的动画过渡
        
            
hello world
            
Bye World
        
        toggle

        //多个组件的动画过渡
        
            
        
        toggle
    

    

• 多个元素的动画过渡：这里使用的是默认的过渡类名，也可以在transition上添加name属性（文档：单元素/组件的过渡）
• 多个组件的动画过渡：这里使用的是component标签和 :is插槽的用法（文档：内置的组件-component）

注意：不明白怎么使用的，一定要看文档

vue中的列表过渡

    
    
    
    



    

        
             
            

                {{item.title}}
            
        
        
        Add
    

    

• 使用transition-group来包裹列表，相当于在每个div上都加上了一个transition（文档：transition-group）
• 循环列表的key最好不使用index

注意：不明白怎么使用的，一定要看文档

vue中的动画封装

    
    
    
    
    



    

        
            
hello world
        
           
        
            
hello world
        
               
       
        toggle
    

    

• 有两种封装动画效果的方法：css动画和js动画，推荐使用js动画，这样可以把动画效果封装成一个组件，不需要全局定义css样式

vue中的动画特效--总结

• 这里把vue文档的进入/离开 & 列表过渡讲完啦（文档：进入/离开 & 列表过渡）
• 还有两个地方没有讲，动态过渡和状态过渡（有需要的自己查看文档）