Transition & Animation of Vue

transition

When Vue inserts, updates, or removes DOM, it provides a variety of application transition effects.

Vue provides a built-in transition encapsulation component that wraps the components to achieve the transition effect.

Grammatical format

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

Transition is actually a fade in and fade out effect. Vue provides 6 class es to switch between element display and hidden transition:

v-enter: defines the start state of transition. Takes effect before the element is inserted, and is removed at the next frame after the element is inserted.
v-enter-active: defines the state when the transition takes effect. Applied throughout the transition phase, effective before the element is inserted and removed after the transition / animation is complete. This class can be used to define the process time, delay and curve function for entering the transition.
v-enter-to: 2.1.8 and above definitions enter the end state of transition. The next frame takes effect after the element is inserted (at the same time the v-enter is removed) and after the transition / animation is completed.
v-leave: defines the start state of the exit transition. Takes effect immediately when the exit transition is triggered, and the next frame is removed.
v-leave-active: defines the state when the leave transition takes effect. Applied throughout the exit transition phase, takes effect immediately when the exit transition is triggered and is removed after the transition / animation is complete. This class can be used to define the process time, delay and curve function of leaving the transition.
V-leave-to: the end state of leaving the transition defined in version 2.1.8 and above. The next frame takes effect after the exit transition is triggered (at the same time, v-leave is deleted), and is removed after the transition / animation is completed.

Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 2. Customize two groups of styles to control transition Internal elements to achieve animation -->
  <style>
    /* v-enter [This is a time point] is the starting state of the element before entering, and it has not yet started to enter */
    /* v-leave-to [This is a time point] is the ending state of the animation after it leaves. At this time, the element animation has ended */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
    /* v-enter-active [Time period of entrance animation] */
    /* v-leave-active [Time period of departure animation] */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }
    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- Requirement: click the button to let h3 Display, click again, let's h3 hide -->
    <!-- 1. Use transition Elements, wrap the elements that need to be controlled by animation -->
    <!-- transition Element is Vue Official -->
    <transition>
      <h3 v-if="flag">This is a H3</h3>
    </transition>
    <hr>
    <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">This is a H6</h6>
    </transition>
  </div>
  <script>
    // Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        flag2: false
      },
      methods: {}
    });
  </script>
</body>
</html>

For these class names that are switched in transition, if you use a < transition > without a name, v - is the default prefix for these class names. If you use < transition name = "my transition" >.

v-enter-active and v-leave-active can control different transition curves.

Using third-party class library to realize animation

We can use the third-party class library of animate.css to implement animation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/animate.css">
  <!-- admission bounceIn    Departure bounceOut -->
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">This is a H3</h3>
    </transition> 
  </div>
  <script>
    // Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>
</html>

JavaScript hook

You can declare JavaScript hooks in properties:
html code

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
 
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

JavaScript code:

// ...
methods: {
  // --------
  // Entering
  // --------
 
  beforeEnter: function (el) {
    // ...
  },
  // This callback function is an optional setting
  // Use when combined with CSS
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
 
  // --------
  // Departure time
  // --------
 
  beforeLeave: function (el) {
    // ...
  },
  // This callback function is an optional setting
  // Use when combined with CSS
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled is only used in v-show
  leaveCancelled: function (el) {
    // ...
  }
}

These hook functions can be used in combination with CSS transitions/animations or separately.

When only JavaScript is used for transition, do must be used for callback in enter and leave. Otherwise, they will be called synchronously and the transition will be completed immediately.

It is recommended to add v-bind:css = "false" to elements that only use JavaScript transitions, and Vue will skip CSS detection. This can also avoid the impact of CSS during the transition.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Hook example</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">Point me</button>
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">My future is not a dream, ha ha ha ha!!!!</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
  el: '#databinding',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})
</script>
</body>
</html>

Transition of initial rendering

The transition of nodes in the initial rendering can be set through the appear ance property

<transition appear>
  <!-- ... -->
</transition>

The default here is the same as the in / out transition. You can also customize the CSS class name.

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

Animation list instance

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    li {
      border: 1px dashed #999;
      margin: 5px;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
    }

    li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
    }



    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }

    /* The following. v-move and. v-leave-active can be used together to achieve the effect of listing subsequent elements and gradually floating up */
    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app">

    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>

      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="Add to" @click="add">
    </div>

    <!-- <ul> -->
      <!-- When implementing the list transition, if you need to transition the elements, you can use the v-for Loop rendered, not available transition Package, need to use transitionGroup -->
      <!-- If you want to v-for The elements created by the loop must be animated, and each element must be set :key attribute -->
      <!-- to ransition-group Add to appear Property to achieve the effect of entering the site when the page is first displayed -->
      <!-- By way of transition-group Elements, setting tag Properties, specifying transition-group Renders to the specified element, if not specified tag Properties, default, render as span Label -->
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <!-- </ul> -->

  </div>

  <script>
    // Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: 'eunuch who conspired with Li Si to influence the succession to the First Emperor' },
          { id: 2, name: 'execrated Song capitulationist' },
          { id: 3, name: 'Yan Song' },
          { id: 4, name: 'Wei Zhong Xian' }
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    });
  </script>
</body>

</html>

builder2991

Published 87 original articles, won praise 198, visited 10000+

Private letter follow

Posted by gmann001 on Mon, 16 Mar 2020 05:07:01 -0700

Programmer Group

Transition & Animation of Vue