vue中的css 动画过渡效果

https://segmentfault.com/a/1190000018125564  很完善了，重点是两个过程图。

 <style>
      .fade-enter{
        opacity: 0;
      }
      .fade-enter-active{
        transition: opacity 3s;
      }
      /* .fade-enter-to{
        color: red;
      }
      .fade-leave{
        color: green;
      } */
      .fade-leave-to{
        opacity: 0;
      }
      .fade-leave-active{
        transition: opacity 3s;
      }
  </style>
</head>
<body>
  <!-- 
    过程如下：
     显示  fade-enter,fade-enter-active      fade-enter-active,fade-enter-to     空
     隐藏  fade-leave,fade-leave-active      fade-leave-active,fade-leave-to     空
  -->
  <div id="root">
    <transition name='fade'>
      <h1 v-show='show'>
        最是年少时模样
      </h1>
    </transition>
    <button @click='change'>切换</button>
  </div>
  <script>
    var vm=new Vue({
      el:'#root',
      data:{
        show:true
      },
      methods:{
        change:function(){
          this.show=!this.show;
        }
      }
    })
  </script>
</body>

 

posted @ 2020-02-19 19:03  聂小恶  阅读(898)  评论(0)  编辑  收藏  举报