Vue-过渡动画2

vue过渡动画2

<style>

  .bounce-enter-active{
    animation:bounce-in .5s;
  }
  
  .bounce-leave-active{
      animation: bounce-in .5s reverse;
  }
  
  @keyframes bounce-in{
    0%{
      transform: scale(0);
    }
    50%{
      transform: scale(1.5);
    }
    100%{
      transform: scale(1);
    }
  }
  
</style>

<button @click="show = !show">放大缩小动画</button>
<transition name="bounce">
  <p v-show="show">uniapp</p>
</transition>

<script>
    var vm = new Vue({
        el:'#app',
        data:   {
            show:true
        },
        methods:{
        }
    });
</script>