在Vue中使用Animate.css库

上一节说的是Vue的过渡动画 ，这一节学习下keyframes动画。

    
    
    
    


    

        
            
hello world
        
        切换
    

    

上式代码中，在style中定义了keyframes动画，名字是bounce-in，大括号里面的内容是各个阶段，字体所改变的大小。
定义完之后，在'.fade-enter-active'和'.fade-leave-active'中就可以使用了：animation后面加上keyframes的名字bounce-in,再写上执行完所需的时间，还得再加上transfor-origin，不然演示动画的时候可能会有问题。'.fade-leave-active'也一样，如果我想让离开的动画反向执行，我在animation后面加上reverse。
上面就是keyframes的C3动画。
有个小知识点：style标签中定义的‘.fade-enter-active’和‘.fade-leave-active’这两个名字是可以用自己定义的名字来代替的，不过还是得在transition中定义一下：

    
    
    
    


    

        
            
hello world
        
        切换
    

    

我在body中的transition标签中定义了‘enter-active-class’和‘leave-active-class’的自定义的名字分别为‘active’和‘leave’，这样就可以在上面的style标签中使用‘active’和‘leave’这两个名字了。

现在介绍下animate.css库，这个库其实就是keyframes封装而来的。
从网上下载好之后，用链接链接到代码中就可以使用了。

    
    
    
    


    

        
            
hello world
        
        toggle
    

    

用animate.css库之后，就不用自己写动画了，直接链接这个库，然后在内容上使用这个库就可以了。
在用的时候，需要注意几点：
1、必须要使用自定义形式的class：“enter-active-class”、“leave-active-class”；
2、自定义形式的class，等号后面必须加一个“animated”这个具体的类，然后添加所需要的动画效果，例子中添加的是swing和shake,