Vue.js 过渡



Vue.js 过渡

Vue.js提供了几种在DOM中插入,更新或删除项目时将过渡和动画效果应用于应用程序的方法。这些过渡和动画效果用于使应用程序对用户具有吸引力和交互性。
它还提供了一些工具来执行以下任务:

它提供了类,并自动将这些类应用于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/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;
}

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

Vue.js 过渡_https://bianchenghao6.com_【vue教程】_第1张

单击该按钮时,文本将在3秒钟内消​​失。参见下图:

Vue.js 过渡_https://bianchenghao6.com_【vue教程】_第2张

示例说明

在上面的示例中,我们创建了一个名为"Click Here"的按钮,可以将show变量的值从true更改为false,反之亦然。我们在p标签中编写了v-show指令,该指令仅在变量为true时显示文本元素。 p标签与transition元素包装在一起,如下所示:
 <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轴上的图像移动100px。请参见以下示例:
示例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> 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 : {
            }
         })

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

Vue.js 过渡_https://bianchenghao6.com_【vue教程】_第3张

单击该按钮时,图像将向右移动100px。请参见以下输出:

Vue.js 过渡_https://bianchenghao6.com_【vue教程】_第4张