vue.js 删除指定元素_第十二章：VueJS 过渡效果Transition and Animation

最新推荐文章于 2022-09-17 17:26:45 发布

毛航宇

最新推荐文章于 2022-09-17 17:26:45 发布

阅读量256

点赞数

文章标签： vue.js 删除指定元素

本文链接：https://blog.csdn.net/weixin_36200503/article/details/112274263

版权

Transition

当在DOM中添加/更新HTML元素时，VueJS提供了多种方法来将过渡应用于HTML元素。VueJS具有内置的过渡组件，该组件需要包装在需要过渡的元素周围。

句法

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

让我们考虑一个示例，以了解过渡的工作原理。

例

<html>
   <head>
      <title>VueJs Instancetitle>
      <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 Mebutton>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Examplep>
         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时才显示文本元素。我们已经用过渡元素包装了p标签，如下面的代码所示。

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Examplep>
transition>

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

以下是一些过渡的标准类-

v- enter-在更新/添加元素之前首先调用此类。它的起始状态。
v-enter-active-此类用于定义进入过渡阶段的延迟，持续时间和缓动曲线。这是整个活动状态，并且在整个进入阶段都可以使用该类。
v-leave-触发离开过渡时添加，删除。
v-leave- active-在离开阶段应用。过渡完成后将其删除。此类用于在离开阶段应用延迟，持续时间和缓动曲线。

以上每个类都将以过渡名称作为前缀。我们将过渡的名称设置为衰落，因此类的名称变为.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过渡

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

褪色

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

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

例

<html>
   <head>
      <title>VueJs Instancetitle>
      <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 Mebutton>
         <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>

转换的名称为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，如以下屏幕截图所示。

影像正确

Animation

动画的应用与过渡相同。动画还具有需要声明的类才能产生效果。

让我们考虑一个示例，看看动画是如何工作的。

例

<html>
   <head>
      <title>VueJs Instancetitle>
      <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 Mebutton>
         <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>

要应用动画，有与过渡相同的类。在上面的代码中，我们将图像封装在p标记中，如以下代码所示。

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" />p>
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>

该类的前缀为过渡名称，即shiftx-enter-active和.shiftx-leave-active。动画的关键帧定义为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);}
}

以下是输出。

动画

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

变化程度

Custom Transition Classes自定义过渡类

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

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;">Animatespan>button>
         <transitionname = "custom-classes-transition"enter-active-class = "animated swing"leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Examplespan>p>
         transition>
      div>
      <script type = "text/javascript">var vm =  new Vue({el: '#animate',data: {show: true
            }
         });script>
   body>
html>

img

动画秋千

BounceIn动画

上面的代码中应用了两个动画。一个 enter-active-class = “animated swing” ，另一个 leave-active-class = ”animated bounceIn” 。我们正在将自定义动画类用于要从第三方库中应用的动画。

显式过渡持续时间

我们可以使用VueJS在元素上应用过渡和动画。Vue等待transionend和animationend事件检测动画或过渡是否完成。

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

<transition :duration = "1000">transition>
<transition :duration = "{ enter: 500, leave: 800 }">...transition>

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

JavaScript钩子

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

例

<html>
   <head>
      <title>VueJs Instancetitle>
      <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;">Togglespan>
         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 velocityp>
         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挂钩

霍克斯

在上面的示例中，我们在过渡元素上使用js方法执行动画。

过渡方法适用如下-

on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">

if = "show" style = "font-size:25px;">Animation Example with velocity

在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 })
   }
}

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

在过渡v-bind：css =“ false”上添加了一个属性，这样做是为了使Vue理解这是一个JavaScript过渡。

初始渲染时的过渡

为了在开始时添加动画，我们需要在过渡元素中添加“ 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">
         <transitionappearappear-class = "custom-appear-class"appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Exampleh1>
         transition>
         <transitionappearappear-class = "custom-appear-class"appear-active-class = "animated swing">
            <h1>Swing - Animation Exampleh1>
         transition>
         <transitionappearappear-class = "custom-appear-class"appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Exampleh1>
         transition>
      div>
      <script type = "text/javascript">var vm =  new Vue({el: '#animate',data: {show: true
            }
         });script>
   body>
html>

在上面的示例中，我们使用了animate.css库中的三种不同的动画。我们在过渡元素中添加了外观。

执行上述代码后，浏览器将输出以下内容。

不同的动画

组件动画

我们可以使用以下代码包装组件的过渡。我们在这里使用了动态组件。

例

<html>
   <head>
      <title>VueJs Instancetitle>
      <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  appearappear-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 Componentsspan>div>'
               }
            }
         });script>
   body>
html>