Animation production must have the time and the change of position or space will produce, js animation produced by the principle of the same is true, does not control the length of time to show or hide or change of position or change color, add some to the animation after the trigger condition is formed of js click, the mouse moving in and out of the movie, This trigger condition we call the event that triggers the animation!

In vue.js, the concrete implementation of all animations is mainly through components
and
.

The main differences between the two are:

  1. <transition>Animate render for a single element (multiple elements need to be wrapped with a parent element)
  2. <transition-group>Animate render for list elements

Other than that there is no essential difference!

<transition>component

There are four main conditions that trigger animation in VUejs:

  1. Conditional Rendering (using V-if)
  2. Conditional presentation (using V-show)
  3. Dynamic components
  4. Components and nodes

Meet the above four conditions will trigger the animation!

Old rule, green flower on the code:

 	<style>
        #app {
            text-align: center
        }
        p {
            width: 350px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            background-color: bisque;
            margin: 16px auto;
        }
        /* Anim-1 animation style */
        .anim-1-enter {
            transform: translateX(100px);
            opacity: 0;
        }
    
        .anim-1-enter-active {
            transition: all 1s ease;
        }
    
        .anim-1-leave-to {
            transform: translateX(-100px);
            opacity: 0;
        }
    
        .anim-1-leave-active {
            transition: all 1s ease;
        }
    	/* Anim-2 animation style */
        .anim-2-enter-active {
            animation: bounce-in 1s;
        }
        .anim-2-leave-active {
            animation: bounce-in 1s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1); }}</style>
    
    <div id="app">
        <div>
            <button @click="show = ! show">toggin</button>
        </div>
        <transition name="anim-1" >
            <p v-if="show">A v - if animation</p>
        </transition>
        <transition name="anim-2">
            <p v-show="show">V - 2 show animation</p>
        </transition>
    </div>
    
    <script>
    
        var vm = new Vue({
            el: '#app'.data: {
                show: true,}});</script>
Copy the code

We can first run the above code to see the effect!

So simple to achieve a cool animation, of course, CSS animation part of the need to understand the meaning of their own!

Let’s examine the two animation modules defined in #app, namely:

<transition name="anim-1" >
	<p v-if="show">A v - if animation</p>
</transition>
Copy the code

is an animation component provided by vue. This component can trigger CSS defined animations if certain conditions are met. How does vue recognize CSS defined animations? The < Transition > component’s name attribute defines the name of the animation transition class. By default, there are six class names:

  1. V-enter: defines the start state of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
  2. V-enter -active: defines the status when the transition takes effect. Applied throughout the transition phase, 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 functions that enter the transition.
  3. V-enter -to: indicates the end state of the transition defined in version 2.1.8 or later. The next frame takes effect after the element is inserted (the V-enter is removed at the same time) and removed after the transition/animation is complete.
  4. V-leave: Defines the start state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
  5. V-leave-active: defines the status when the leave transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
  6. V-leave-to: the end state of the departure transition defined in version 2.1.8 and above. The next frame takes effect after the exit transition is triggered (and the V-leave is deleted at the same time), and is removed after the transition/animation is complete.

If you use an unnamed
component, you don’t give the
component a name(e.g.
The default six names will be replaced with the name we defined, for example, v-enter will be replaced with my-transition-Enter.

Thinking: If you use the third-party CSS animation library, the style of the animation class is built-in named in advance, we just need to add, but set the name will be replaced by the above, that is certainly not possible, there is no solution?

The answer is definitely yes, Vue allows us to customize the transition class name!

Custom transition class name

The < Transition > component of the custom transition class vue provides six attributes for each of the six transition classes.

  1. Enter – class corresponding to v – enter
  2. Enter corresponding v – enter – activ – active – class
  3. Enter -to-class (2.1.8+) corresponds to V-enter -to
  4. Leave – class corresponding to v – leave
  5. Leave – active – class corresponding to v – leave – active
  6. Leave-to-class (2.1.8+) corresponds to V-leave-to

They take precedence over normal class names, which is useful when used in conjunction with Vue’s transition system and other third-party CSS animation libraries, such as Animate. CSS, to solve the above problems.

Cuihua code:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

   <div id="example-3">
      <button @click="show = ! show">
        Toggle render
      </button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
    
    <script type="text/javascript">
      new Vue({
        el: '#example-3'.data: {
          show: true}})</script>
Copy the code

   <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight">
        <p v-if="show">hello</p>
   </transition>
Copy the code

Look at the above code, I’m sure you can understand, this is how to customize the transition class method!

JavaScript hooks

Vue also provides 8 hook functions, which are slightly different but essentially the same. This means that when the animation enters the current state, the callback method is implemented through JS, which can be used in conjunction with some JS animation libraries, or can be used alone!

  // Ready to enter (animation has not started yet)
  v-on:before-enter="beforeEnter" 
  // Start animation
  v-on:enter="enter"
  // Enter the animation execution end
  v-on:after-enter="afterEnter"
  // The entry animation was cancelled
  v-on:enter-cancelled="enterCancelled"
  
  // Ready to leave (animation has not started yet)
  v-on:before-leave="beforeLeave"
  // Leave the animation and start executing
  v-on:leave="leave"
  // Leave animation execution finished
  v-on:after-leave="afterLeave"
  // Leave animation cancelled (only under V-show)
  v-on:leave-cancelled="leaveCancelled"
Copy the code

Cuihua, official code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="app">
    <div>
        <button @click="onStartAnim">toggin</button>
    </div>
    <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">
        <p v-show="show">V - 2 show animation</p>
    </transition>

</div>


<script>

    var vm = new Vue({
        el: '#app'.data: {
            show: false
        },
        methods: {
            onStartAnim: function () {
                this.show = !this.show;
            },
            beforeEnter: function (el) {
                // Ready to enter (animation has not started yet)
                console.log('beforeEnter');

                /** * It is recommended to add v-bind: CSS ="false" for elements that use JavaScript transitions only. Vue skips CSS detection. This also avoids the impact of CSS during the transition. * * /
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            enter: function (el, done) {
                // Start animation
                console.log('enter');

                /** * When transitioning only with JavaScript, the done callback must be used in enter and leave. Otherwise, they will be called synchronously and the transition will complete immediately. * * /
                Velocity(el, { opacity: 1.fontSize: '1.4 em' }, { duration: 300 })
                Velocity(el, { fontSize: '1em' }, { complete: done })
            },
            afterEnter: function (el) {
                // Enter the animation execution end
                console.log('afterEnter');
            },
            enterCancelled: function (el) {
                // The entry animation was cancelled
                console.log('enterCancelled');
            },
            beforeLeave: function (el) {
                // Ready to leave (animation has not started yet)
                console.log('beforeLeave');
            },
            leave: function (el, done) {
                // Leave the animation and start executing
                console.log('leave');

                /** * When transitioning only with JavaScript, the done callback must be used in enter and leave. Otherwise, they will be called synchronously and the transition will complete immediately. * * /
                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 })
            },
            afterLeave: function (el) {
                // Leave animation execution finished
                console.log('afterLeave');

            },
            leaveCancelled: function (el) {
                // Leave animation cancelled (only under V-show)
                console.log('leaveCancelled'); }}});</script>
Copy the code

There are also some details, such as the use of the
component mode property, the use of the Duration property, and the initial render animation appear. These are relatively easy to understand.

Vue animation official documentation: Click to learn >>

List the transition

The
is an animated rendering of list elements. It is essentially the same as the
component, but there are a few extra features that need to be noted:

  1. Different from the<transition>, it will be rendered as a real element: the default is one<span>. You can also passtag attributeReplace it with another element.
  2. The transition mode mode is not available because we no longer switch between unique elements.
  3. Internal elements always need to provide a unique key attribute value.
  4. CSS transitioning classes will be applied to internal elements, not the group/container itself.
  5. For details about how to use v-Move, see V-Enter. Raised when the order of elements in a list (ul->li) changes (order change, add element, delete element, etc.)

Old rule, green flower on the code:

  <style type="text/css">
    .list-complete-item {
      transition: all 1s;
      display: inline-block;
      margin-right: 10px;
    }
    .list-complete-enter..list-complete-leave-to
    /*. List -complete-leave-active for below version 2.1.8 */ {
      opacity: 0;
      transform: translateY(30px);
    }
    .list-complete-leave-active {
      position: absolute;
    }
  </style>
  
   <div id="list-complete-demo" class="demo">
      <button v-on:click="shuffle">Shuffle</button>
      <button v-on:click="add">Add</button>
      <button v-on:click="remove">Remove</button>
      <transition-group name="list-complete" tag="p">
        <span
          v-for="item in items"
          v-bind:key="item"
          class="list-complete-item"
        >
          {{ item }}
        </span>
      </transition-group>
    </div>
    
    <script type="text/javascript">
      new Vue({
        el: '#list-complete-demo'.data: {
          items: [1.2.3.4.5.6.7.8.9].nextNum: 10
        },
        methods: {
          randomIndex: function () {
            return Math.floor(Math.random() * this.items.length)
          },
          add: function () {
            this.items.splice(this.randomIndex(), 0.this.nextNum++)
          },
          remove: function () {
            this.items.splice(this.randomIndex(), 1)},shuffle: function () {
            this.items = _.shuffle(this.items)
          }
        }
      })
    </script> 
Copy the code

This is an example provided on the official website that describes the
well. The code first specifies name=list for the
to mark the transition class name for animation rendering, and then specifies tag=p to indicate that
will be replaced with

tags when it is rendered. When we click the Shuffle, Add, or Remove buttons, we modify the list data, activate the animation, and start executing.

Animation in vue.js is not difficult, but a little messy, as long as you can understand the points we comb in your brain, then the knowledge of animation in vue.js is almost mastered.

Vue’s third party animation library

CSS animation library:

Animate.css

Js animation library:

  • animejs
  • Velocity.js

Lodash is a consistent, modular, high-performance JavaScript utility library that combines many cool effects with computation.

conclusion

In addition to the two animation libraries listed above, there are many widely used animation libraries, such as tween.js.

The inanimate. CSS library is easy to use. You only need to assign specific class names.

The other is to use JavaScript code for animation manipulation, such as animejs, velocity.js, etc. This kind of library (framework) is a bit complicated to use and has a learning cost, but the benefit is that the problems it solves are complex enough to be worth the time invested in learning.

Thank you for reading, if you are helpful, welcome to pay attention to “CRMEB” nuggets. Code cloud has our open source mall project, knowledge payment project, JAVA version of the full open source mall system, study and study welcome to use, the old iron easily point a star bai, the boss reward fifty cents, points you twenty-five cents, 😂😂 pay attention to us to keep in touch!