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

移入

vue动画 过渡效果以及 animate.css、velocity.js的基本使用_第1张图片

移出

vue动画 过渡效果以及 animate.css、velocity.js的基本使用_第2张图片

  • 最基本动画




    
    
    
    使用animate.css
    
    


    
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

    

 

你可能感兴趣的:(vue,动画,animate,velocity)