vue中css动画transition

最新推荐文章于 2024-10-09 12:37:06 发布

叨唠

最新推荐文章于 2024-10-09 12:37:06 发布

阅读量767

点赞数

分类专栏： Vue 文章标签： vue vue动画 transition

本文链接：https://blog.csdn.net/zyz00000000/article/details/84303658

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

Transition Diagram

动画第一帧：v-enter v-leave

动画最后一帧： v-enter-to v-leave-to

动画属性时间等过程：v-enter-active v-leave-active

如果没有写第一帧或最后一帧，那么默认是动画开始前的值，动画结束后的值

v-leave无效的原因？？？

  <style>

    .fade-leave-active {
      transition: font-size 5s;
    }
    .fade-leave-to {
      font-size: 50px
    }
    .fade-enter {
      font-size: 40px;
    }
    .fade-enter-active {
      transition: font-size 3s;
    }
    .fade-enter-to {
      font-size: 20px
    }
  
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
  </script>
</body>

该方法动画结束后，还是会回到代码设置的状态。就是抛开动画效果，代码设置的什么样子，结果就是什么样子。

特点：用transition name来包裹一个显示/隐藏的标签