Vue animation

In this post we are going to look at transitions and animations in Vue. Vue 2 offers the ability to integrate enter & leave animations, along with state transitions. We’re going to look at Vue animations in a basic context throughout this lesson, and integrate our own animations with the project that we’ve been working on throughout this course.

The biggest use of vue animation is when element enter and leave the DOM. If these animation used correctly it will give a nice UI and user interaction, instead of just showing the element.

To demonstrate the Vue animation we gonna use the same app which we have created in my previous blog Deploying VueJS SPA on Heroku, You can find and clone the app Git user search here.

Difference between Transitions and Animations
Transitions the process or a period of changing from one state or condition to another. So when element changes its state we apply the Transitions animation. The purpose of using transition is to give reach user experience and tell user something has been changed. Mouse hover, button click, element is added to DOM are the real working actions when Transitions happens.

Here is the result which we will try to achieve.

GIF

So for Transitions effects we will use vue2-animate. vue2-animate Cross-browser CSS3 animation library.
Lets install it

$ npm install --save vue2-animate

No we will go to our template which use axios to fetch users list, and display the users data.

Here we will animate user list with the help of the transition-group component wrapper.

 <transition-group name="bounceRight" tag="ul">
<ul>
<li class="col-md-3"></li>
</ul>
</transition-group>

Note: If you note here our list have index :key="index"In order for this to work, list must have an index.
Look its pretty simple, you will see that the new list item animates in based on the Animate.css class we’ve applied to it. Here we use bounceRight class.
What happens here, when we wrapped li element in transition-group component?

  • Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
  • If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
  • If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame

transition-group element takes care of applying and unapplying classes.
There are 6 classes applied for enter/leave transitions.
v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to

CSS Animations
Animations not like transitions where it has only 2 states start and end state, animations may have multiple states. for example transitions have start (A) and end (B) states where Animation can go from A to B to c to D and further more. The main use of animation is to show continuously that something is changing. Unlike transitions it is not limited only with 2 states.

CSS animations are applied in the same way as CSS transitions, the difference being that v-enter is not removed immediately after the element is inserted, but on an animationend event.
Here is example

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

JS Animation
There are some nice JS hooks that are very easy to use. These hooks can be used in combination with CSS transitions/animations or on their own.

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

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>
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: '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 })
    }
  }
})

References:
Transitions & Animation
vue2-animate



Leave a Reply