Vue——过渡和动画1

参考：vue官网 1、代码

  
  过渡&动画1
  
    /*显示、隐藏的过度效果*/
    .fade-enter-active,.fade-leave-active{
      transition: opacity 1s;
    }
   /* 隐藏时的样式*/
    .fade-enter,.fade-leave-to{
      opacity: 0;
    }

    /*显示的过度效果*/
    .xxx-enter-active{
      transition: all 1s;
    }
    /*隐藏的过度效果*/
    .xxx-leave-active{
      transition: all 3s;
    }
    /* 隐藏时的样式*/
    .xxx-enter,.xxx-leave-to{
      opacity: 0;
      transform: translateX(20px);/*水平向右移动20px*/
    }
  



. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->


  toggle
  
    hello world1
  




  toggle
  
    hello world2
  






    new Vue({
        el:'#test1',
        data:{
            isShow:true
        }
    })
    new Vue({
        el:'#test2',
        data:{
            isShow:true
        }
    })

2、效果 1）点击之前效果如下图 2）点击toggle按钮之后，1秒钟hello world1消失，效果如下： 3）点击之3)前效果如下图 4）点击test按钮之后，3秒钟hello world2向右移动并且消失，效果如下：