动画效果、过渡效果(了解)

 Test使用的是动画效果、Test1使用的是过渡效果

实现点击按钮会让文字“你好啊！”显示或隐藏

Test.vue

<template>     
        <div>
              <button @click="isShow = !isShow">显示/隐藏</button>
<!--transition包裹的h1应用动画效果；appear表示一出场就有效果-->
           <transition appear>
              <h1 v-show="isShow">你好啊！</h1>
           <transition>
        </div>
 </template>
  
<script>
      export default{      
             name:'Test',   
             data(){
                  return{
                     isShow:true
                   }
             }
         }
</script>

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

     .v-enter-active{
          animation: atguigu 0.5s linear;
     }
     .v-leave-active{
          animation: atguigu 0.5s linear reverse;
     }
<!--0.5s匀速从右边出现-->
      @keyframes atguigu{
          from{
               transform:translateX(-100%);
          }
          to{
               transform:translateX(0px);
          }
}

</style>

 

test1.vue

<template>     
        <div>
              <button @click="isShow = !isShow">显示/隐藏</button>
<!--transition包裹的h1应用动画效果；appear表示一出场就有效果-->
           <transition appear>
              <h1 v-show="isShow">你好啊！</h1>
           <transition>
        </div>
 </template>
  
<script>
      export default{      
             name:'Test1',   
             data(){
                  return{
                     isShow:true
                   }
             }
         }
</script>

<style scoped>
      h1{
          background-color:orange;
          transition: 0.5s linear;
     }

     .v-enter, .v-leave-to{
          transform: translateX(-100%);
     }
     .v-enter-to, .v-leave{
          transform: translateX(0);
     }
}

</style>

 

App.vue

<template>     
        <div>
            <Test/>
            <Test1/>

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