VueJS - 过渡&动画

VueJS - 过渡&动画 首页 / VueJs入门教程 / VueJS - 过渡&动画

在本章中，无涯教程将讨论VueJS中可用的Transition和Animation函数。

Transition过渡

当在DOM中添加/更新HTML元素时，VueJS提供了多种方法来将Transition(过渡动画)应用于HTML元素， VueJS具有内置的Transition组件。

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

先考虑一个示例，以了解Transition的工作原理。

复制代码
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show=!show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

创建了一个名为clickme的按钮，使用该按钮可以将show变量的值从true更改为false，反之亦然。 p标签仅在变量为true时显示文本元素。已经用Transition元素包装了p标签，如下面的代码所示。

复制代码
<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

Transition的名称是 fade 。 VueJS提供了一些用于Transition的标准类，并且这些类的前缀是Transition的名称。

以下是一些Transition的标准类-

  • v-enter                 -   在updated/added元素之前首先调用此类，它是起始状态。

  • v-enter-active     - 此类用于delay，duration和easing curve 活动状态。

  • v-leave                 - 用于离开Transition时triggered，removed。

  • v-leave-active     - Transition完成后将其删除，此类用于在离开阶段delay，duration和easing curve 。

以上每个类都将以Transition名称作为前缀。将Transition的名称设置为fade，因此类的名称变为 .fade_enter，.fade_enter_active，

.fade_leave，.fade_leave_active 。

它们在以下代码中定义。

复制代码
<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.fade_enter_active和.fade_leave_active一起定义，并且在开始和离开阶段应用过度。 opacity属性在2秒内更改为0。

持续时间在.fade_enter_active和.fade_leave_active中定义。最后阶段在.fade_enter，.fade_leave_to中定义。

浏览器中的显示如下。

Vue Transition

单击该按钮，文本将在两秒钟内消失。

Fade

两秒钟后，文本将完全消失。

再考虑另一个示例，其中有一个图像，当单击按钮时，它在x轴上移动。

复制代码
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/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">
         <button v-on:click = "show=!show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Transition的名称是 shiftx 。使用下面的代码，可以使用transform属性将x轴上的图像移动100px。

复制代码
<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>

以下是输出。

Shiftx

单击按钮后，图像将向右移动100px，如以下屏幕截图所示。

Image Right

Animation动画

Animation的应用与Transition相同。动画还具有需要声明的类才能产生效果。考虑一个示例，以查看动画的工作原理。

复制代码
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show=!show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

要应用动画，有与Transition相同的类。在上面的代码中，将图像包含在p标签中，如以下代码所示。

复制代码
<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

Transition的名称是 shiftx 。应用的类如下-

复制代码
<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

该类的前缀为Transition名称，即shiftx-enter-active和.shiftx-leave-active。Animation的关键帧定义为0％到100％。在每个关键帧处定义了一个转换，如以下代码所示。

复制代码
@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

以下是输出。

Animation

单击该按钮时，它会从0旋转到360度，然后消失。

Change Degree

自定义过渡类

VueJS提供了一系列自定义类，可以将它们作为属性添加到Transition元素中。

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

自定义类基本上要使用外部CSS库(例如animate.css)时起作用。

复制代码
<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show=!show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">例</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

运行上面代码输出

Animated SwingAnimated BounceIn

上面的代码中应用了两个动​​画。一个enter-active-class ="Animation swing"，另一个leave-active-class ="AnimationbounceIn"。

过渡持续时间

无涯教程使用VueJS在元素上应用Transition和Animation。 Vue等待transionend和animationend事件检测Animation或Transition是否完成。

有时Transition可能会导致延迟。在这种情况下可以如下明确地应用持续时间。

复制代码
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

可以将duration属性与Transition元素上的:一起使用，如上所示。如果需要分别指定进入和离开的持续时间，可以按照上面的代码所示进行。

JavaScript钩子

可以将Transition类称为使用JavaScript事件的方法。考虑一个更好理解的例子。

复制代码
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show=!show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

运行上面代码输出

JavaScript挂钩 JsHooks

在上面的示例中在Transition元素上使用js方法执行Animation。

Transition方法适用如下-

复制代码
<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

在 v-on 上添加了前缀，以及调用该方法的事件的名称。这些方法在Vue实例中定义如下:

复制代码
methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

这些方法中的每一种都将应用所需的转换。单击按钮以及完成动画后，都会应用不透明度动画。

初始渲染时的过渡

为了在开始时添加Animation，需要在Transition元素中添加" appear"属性。看一个例子，以更好地理解它。

复制代码
<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation 例</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation 例</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation 例</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

在上面的示例中，使用了animate.css库中的三种不同的动画。在Transition元素中添加了外观。执行上述代码后，浏览器将输出以下内容。

Different Animation

组件动画

无涯教程可以使用以下代码包装组件的Transition。在这里使用了动态组件。

复制代码
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

运行上面代码输出

Animation on Component

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

深入浅出区块链 -〔陈浩〕

机器学习40讲 -〔王天一〕

系统性能调优必知必会 -〔陶辉〕

罗剑锋的C++实战笔记 -〔罗剑锋〕

职场求生攻略 -〔臧萌〕

TensorFlow 2项目进阶实战 -〔彭靖田〕

Linux内核技术实战课 -〔邵亚方〕

A/B测试从0到1 -〔张博伟〕

如何讲好一堂课 -〔薛雨〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630