vue中动画关键帧keyframes 和 animation 和animate动画库

最新推荐文章于 2024-08-12 11:00:42 发布

叨唠

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量2.7k

点赞数

分类专栏： Vue 文章标签： vue 动画关键帧 @keyframes animation

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

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

（1）

  <style>
    @keyframes fontScale {
      0% {
        font-size: 30px;
      }
      100% {
        font-size: 50px;
      }
    }
    .fade-leave-active {
      animation: fontScale 3s
    }
    .fade-enter-active {
      animation: fontScale 3s
    }
    
  
  </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 包裹显示隐藏的标签，样式中：@keyframes定义动画的名字和开始到结束的样式，name-enter-active和name-enter-active使用animation动画，设置时间、reverse等值。

（2）name-enter-active 和name-leave-active 是系统添加的，可以自己设置这两个类的名字

  <style>
    .de {
      height: 100px;
      width: 100px;
      background: red;
    }
    @keyframes fontScale {
      0% {
        height: 30px;
      }
      100% {
        height: 50px;
      }
    }
    .leave {
      animation: fontScale 3s
    }
    .enter {
      animation: fontScale 3s reverse;
    }
    
  
  </style>
</head>

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

（3）这样就可以使用animation库

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