VUE学习：vue基础20————动画02：动画

最新推荐文章于 2025-11-08 00:13:12 发布

原创最新推荐文章于 2025-11-08 00:13:12 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 同时被 2 个专栏收录

29 篇文章

订阅专栏

新星计划

15 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现基础动画效果，包括使用CSS关键帧动画完成过渡效果，并探讨了如何结合第三方动画库如animate.css，以及动画钩子函数的使用。通过实例演示了过渡类名设置和动画触发的方法。

提示：
VUE学习：vue基础20————动画01：过渡

VUE学习：vue基础20————动画02：动画

前言
动画
- 动画

前言

本文学习Vue的动画相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

动画

使用动画完成过渡效果

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      /*创建动画*/
      @keyframes myScale {
         from {transform: scale(0)}
         50% {transform: scale(2)}
         to {transform: scale(1)}
      }
      @keyframes myMove {
         0% {
            transform: translateX(0);
         }
         50% {
            transform: translateX(100px);
         }
         100% {
            transform: translateX(200px) translateY(100px);
         }
      }
      .scale-enter-active{
         animation: myScale 2s;
      }
      .scale-leave-active{
         animation: myScale 2s reverse;
      }
      .move-enter-active{
         animation: myMove 2s;
      }
      .move-leave-active{
         animation: myMove 2s reverse;
      }
   </style>
   <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <button type="button" @click="change=!change">变变变</button>
   <transition name="scale">
      <h3 v-show="change">放大还是缩小，这是一个问题</h3>
   </transition>
   <transition name="move">
      <h3 v-show="change">移动还是静止，这也是一个问题</h3>
   </transition>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         change:true
      },
      methods: {}
   });
</script>

在这里插入图片描述

第三方动画库的使用

animate.css 动画库中文网地址：http://www.animate.net.cn/

使用第三方库：

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
   <button type="button" @click="show=!show">toggle</button>
   <transition v-on:enter="enter" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft">
      <h3 v-if="show">跳跃效果</h3>
   </transition>
   <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
      <h3 v-if="show">翻转效果</h3>
   </transition>
</div>
</body>
<script>

   let vm = new Vue({
      el: "#app",
      data: {
         show:true
      },
      methods: {
         enter(el,done){
            console.log(el);
            console.log(done);
            done();
         }
      }
   });
</script>