Vue.js使用keyframes动画

最新推荐文章于 2025-05-23 14:10:47 发布

曾皙

最新推荐文章于 2025-05-23 14:10:47 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_39148344/article/details/84205036

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了Vue中使用CSS动画实现元素过渡效果的原理。通过一个简单的示例，展示了如何利用@keyframes定义动画，并结合.fade-enter-active和.fade-leave-active类控制元素的显示与隐藏过程中的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue中css动画的原理</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <style>
    @keyframes bounce {
      0% {
        transform: scale(0);
      }

      50% {
        transform: scale(1.5);
      }

      100% {
        transform: scale(1);
      }
    }

    /* .fade-enter-active和.fade-leave-active代表一直都在的那个时间点 */
    .fade-enter-active {
      transform-origin: left center;
      /* 这里写这个因为div太宽了 */
      animation: bounce 1s;
    }

    .fade-leave-active {
      transform-origin: left center;
      animation: bounce 1s reverse;
    }
  </style>
</head>

<body>
  <div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="click">切换</button>
  </div>
  <script>
    var root = new Vue({
      el: '#root',
      data: {
        show: true
      },
      methods: {
        click: function () {
          this.show = !this.show;
        }
      }
    })
  </script>

</body>

</html>