vue中的css 动画过渡效果

本文转载自查看原文 2020-02-19 19:03 712 vue

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css动画效果之transition（动画过渡效果属性） Vue的transition过渡效果 Vue过渡效果之JS过渡 css过渡动画，鼠标移上去就变大（缓慢变大、过渡效果、放大的过程是过渡动画的，这个过渡动画是有时间控制的） vue2.0的transition过渡效果 animation过渡效果 CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） HTML CSS3中2D转换、3D转换、过渡效果总结 CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画) CSS3 transition 属性过渡效果详解