在我们显示的页面中动画对于我们来说虽然不是必须的，但是必要的一些动画效果能够提高用户的体验，帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。

Vue 动画

不带动画效果的案例

  我们先来实现一个不带动画效果的显示和隐藏的功能。
案例代码

    
    
    
    
    



    
        

        
这是一个h3
    
    

效果

在这里插入图片描述

效果虽然实现了，但是效果并不是太好。

过渡类名实现动画

  Vue 在插入、更新或者移除 DOM 时,我们可以在 CSS 过渡和动画中自动应用 class，

在这里插入图片描述

具体使用

1.要使用过渡动画效果的元素 必须被 transition标签包裹

在这里插入图片描述

2.定义对应的样式

在这里插入图片描述

完整代码

    
    
    
    
    
    



    
        
        
            
这是一个h3
        
    
    

效果

在这里插入图片描述

定义transition名称

  对于没有定义的transition名称的类名默认前缀是 v-,但如果我们想要自定义前缀，那么可以给transition设置个那么属性，比如：

在这里插入图片描述

在这里插入图片描述

效果还是一样的。

通过第三方类来实现动画

  通过案例中我们需要自定动画效果，这个会显得有点麻烦，这时我们可以使用别人已经定义的动画效果，比如Animate.css来实现，https://daneden.github.io/animate.css/ 官网效果

在这里插入图片描述

是不是提供的效果蛮多的呀，我们就来看看具体怎么用吧。

• 引入资源样式

在这里插入图片描述

可以自行在官网下载 在transition中添加对应的样式

在这里插入图片描述

https://github.com/daneden/animate.css 具体的样式类可以在此页面选择

在这里插入图片描述

注意：duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长

完整代码:

    
    
    
    
    
    



    
        
        
            
这是一个H3
         
    
    

效果

在这里插入图片描述

演示效果不是太理想，工具原因，感兴趣的小伙伴可自行运行哦。