Vue.js 过渡和动画

Vue.js 提供几种方式来将转换和动画效果应用于应用程序，当您在 DOM 中插入、更新或删除项时。这些转换和动画效果用于使应用程序对用户具有吸引力和交互性。

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

它提供类并自动将这些类应用于 CSS 转换和动画。
它可以集成第三方 CSS 动画库，例如 Animate.css。
它可以直接使用 JavaScript 操作 DOM 来执行转换钩子。
它可以集成第三方 JavaScript 动画库，例如 Velocity.js。

Vue.js 过渡

有多种方式可以在您插入、更新或从 DOM 中删除 HTML 元素时应用转换。 Vue.js 提供了一个内置转换包装器组件，您必须在其中使用进入/离开转换以适用于任何元素或组件。请查看转换效果的语法。

语法：

<transition name = "名称">
   <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/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> 点击下面的按钮以查看转换效果。</p>
         <button v-on:click="show = !show">点击这里</button>
         <transition name="fade">
            <p v-show="show" v-bind:style="styleObj">这是淡入淡出过渡示例</p>
         </transition>
      </div>
      <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;
}

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

输出：

Vue.js 过渡和动画

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

Vue.js 过渡和动画

例子解释

在上面的例子中，我们创建了一个名为“Click Here”的按钮，我们可以更改变量show的值从true到false，反之亦然。我们在p标记中写入v-show指令，仅当变量为true时才显示文本元素。p标记被包装在转换元素中如下所示：

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">这是一个淡入淡出过渡示例</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 类，并在开始和离开阶段应用了一个过渡。

在这里，opacity属性在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/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> 点击下面的按钮，查看转换效果。</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 : {
            }
         })

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

输出：

Vue.js 过渡和动画