集成第三方动画

第三方库地址：https://animate.style/

首先安装库

npm install animate.css

Test.vue 

<template>     
        <div>
              <button @click="isShow = !isShow">显示/隐藏</button>
<!--transition包裹的h1应用动画效果；appear表示一出场就有效果;
  name是配置animate第三方库的。enter-active-class填充进来的样式-->
           <transition-group
               appear 
               name="animate__animated animate__bounce" 
               enter-active-class="animate__swing"
               leave-active-class="animate__backOutUp"
               >
              <h1 v-show="isShow" key="1">你好啊！</h1>
              <h1 v-show="isShow" key="2">尚硅谷！</h1>
           </transition-goup>
        </div>
 </template>
  
<script>
<!--引入样式-->
      import 'animate.css'

      export default{      
             name:'Test',   
             data(){
                  return{
                     isShow:true
                   }
             }
         }
</script>

<style scoped>
      h1{
          background-color:orange;
        
     }


</style>

 

App.vue

<template>     
        <div>
            <Test/>
        </div>
 </template>
  
<script>
      export default{      
             name:'Student',   
             components:{Test}
         }，
</script>