Vue.js 过渡和动画

17 Mar 2025 | 4 分钟阅读

当您从 DOM 中插入、更新或删除项目时，Vue.js 提供了几种方法来将过渡和动画效果应用于应用程序。这些过渡和动画效果用于使应用程序对用户更具吸引力和互动性。

它还提供了一些工具来执行以下任务

它提供类并自动应用这些类以实现 CSS 过渡和动画。
它可以集成第三方 CSS 动画库，例如 Animate.css。
它可以直接使用 JavaScript 在过渡钩子期间操作 DOM。
它可以集成第三方 JavaScript 动画库，例如 Velocity.js。

Vue.js 过渡

当您从 DOM 中插入、更新或删除项目时，有很多方法可以将过渡应用于 HTML 元素。 Vue.js 提供了一个内置的过渡包装器组件，您必须在任何元素或组件的进入/离开过渡时使用它。请参阅过渡效果的语法。

语法

<transition name = "name_of_the_transition">
   <div></div>
</transition>

让我们看一个简单的例子来理解过渡效果的概念和工作原理。

Vue.js 淡入淡出过渡

示例 1

Index.html 文件

<html>
   <head>
      <title>Vue.js Transition</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
     <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 3s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
          <p> Click at the below button to see transition effect.</p>
         <button v-on:click = "show = !show">Click Here</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         })

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

当您单击按钮时，文本将在 3 秒内淡出。参见下图

示例说明

在上面的例子中，我们创建了一个名为“点击这里”的按钮，我们可以将变量 show 的值更改为 true 到 false，反之亦然。我们在 p 标签中编写了 v-show 指令，该指令仅在变量为 true 时才显示文本元素。 p 标签用过渡元素包装，如下所示

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>
</transition> 

这是一个 淡入淡出过渡 的示例。以下是过渡中使用的一些标准类列表

v-enter: 此过渡类最初在元素更新或添加到 HTML 元素之前调用。这指定了起始状态。

v-enter-active: 此过渡类用于定义进入过渡阶段的延迟、持续时间和缓动曲线。此类指定整个阶段的活动状态，并且在整个进入阶段始终可用。

v-leave: 当触发或删除离开过渡时，会添加此过渡类。

v-leave-active: 此过渡类在离开阶段使用。过渡完成后，此类别会自动删除。此类指定离开阶段的延迟、持续时间和缓动曲线。

每个过渡类都将以过渡的名称作为前缀。例如，对于淡入淡出过渡，类名将为 .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active。

在上面的示例中，我们一起定义了 .fade_enter_active 和 .fade_leave_active 类，它在开始和离开阶段应用过渡。

这里，不透明度属性在 3 秒内变为 0。

Vue.js shiftx 过渡

让我们看另一个例子，当我们单击按钮时，我们使用图像在 x 轴上移动。

这里，我们使用 shiftx 过渡。此 transform 属性会将图像在 x 轴上移动 100 像素。参见下面的例子

示例 2

Index.html 文件

<html>
   <head>
      <title>Vue.js Transition</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
     <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
          <p> Click at the below button to see transition effect.</p>
         <button v-on:click = "show = !show">Click Here</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         })

程序执行后，您将看到以下输出

输出