vue动画 过渡效果以及 animate.css、velocity.js的基本使用

移入

移出

• 最基本动画

    
    
    
    
    
    


    

        
            
Say Hello
        
        切换
    
    

---

• 使用 keyframs实现动画

css:

这个时候就会产生一个问题这个css的样式名称必须按照格式严格命名吗？当然不。如果需要自己命名，可以在html进行想应的修改如下：

active可对应上面的fade-enter-active,leave可对应上面的fade-leave-active

    

        
            
Say Hello
        
        切换
    

• 在自定义样式名称的基础上使用animate

引入animate.css

    

        
            
Say Hello
        
        切换
    

• 同时使用过渡效果和动画

结合上面两种在enter-active-class、leave-active-class中添加过度效果样式

• js动画与velocity.js结合

js:

    

        
            
Say Hello
        
        切换
    
    

除了上述的入场动画还有出场动画事件：before-leave、leave、after-leave用法与enter相同

引用velocity.js