Vue——过渡&动画2

参考：vue官网 1、代码

  
  过渡&动画2
  
    /*显示的过度效果*/
    .bounce-enter-active {
      animation: bounce-in 1s;
    }
    /*隐藏的过度效果*/
    .bounce-leave-active {
      animation: bounce-in 1s reverse;/*reverse反转*/
    }
    @keyframes bounce-in {/*定义上面用到的bounce-in*/
      0% {/*0%指上面定义的1s范围内，0秒的位置*/
        transform: scale(0);/*scale(0)原始大小变为消失*/
      }
      50% {/*0%指上面定义的1s范围内，0.5秒的位置*/
        transform: scale(1.5);/*scale(1.5)原始大小的1.5倍*/
      }
      100% {/*0%指上面定义的1s范围内，1秒的位置*/
        transform: scale(1);/*scale(1)显示原始大小*/
      }
    }
  



    test
    
      hello world !
    





    new Vue({
        el:"#demo",
        data:{
            show:true
        }
    })

2、效果图