Animation in Vue.js Part02: <Transition> advanced using
self learning note — <transition> control-properties, javascript hooks, <transition-group> and component transition
Overview
Last article we talked about some basic use of <transition>, If you want to know that you can click the link below to check it out.
Animation in Vue.js Part 01 direction link: https://medium.com/@glavecoding/animation-in-vue-js-part01-transition-intro-and-basic-usage-ccdf0a84960e
<transition> has more using and details to deal with animation and transition, now, let’s do it!
Custom JavaScript hooks in <transition>
In Vue.js <transition>, there are many JavaScript hooks you can call to control each phase of transition, check it out here:
Usage
As you use the JavaScript hooks, you can bind the function you set methods in each hook.
<transition
v-on:before-enter="beforeEnter"
:enter="YOUR_FUNCTION_NAME" // you can also use the v-on shortcut like this
>
<!-- put the component or element here -->
</transition>methods:{ beforeEnter: function (el) {
// el will be the dom element, you can do the console
// like console.log(el) to check it
el.style.opacity = 0el.styl
e.transformOrigin = 'left'
}}
Hooks list
There are all hooks you can use below, the enter-cancelled & leave-cancelled can only use with v-show.
And, in v-on:enter & v-on:leave it has another optional hook done for more flexible CSS using
v-on:before-enter&v-on:before-leave: the timing before transition enter, the default status of elementsv-on:enter&v-on:leave: the entering & leaving phase, the first settable point for the transition, you can put two argumentselanddoneas hooks in the function, but after tested it,done()didn’t really work.v-on:after-enter&v-on:after-leave: the end of the enter & leave phasev-on:leave-cancelled&v-on:enter-cancelled: for thev-showin transition only, you can set extra animation here
done() using problem
Normally, you can just use done() to call function back, avoid the problem that the before-enter and enter will start and go together.
enter(el,done){
//
done() // but, it does not work
}BUT, it does not work here. Afterward, I tried several different ways in it, the better and quick way I used here is setTimeout() function in enter, we can check the example below.
Example
Here we can make a complex enter-in and leaving animation as an example. In the example, I put the random rotate angle in v-on:enter, and put CSS animation in v-on:leave
methods:{
beforeEnter(el){
if(el){
const rdeg = (0.5-Math.random())*360 // the random degree
el.style.opacity = 0
el.style.transform = "rotate("+rdeg+"deg)"
}
},
Enter(el){
setTimeout(()=>{
// put style control here
el.style.opacity=1
el.style.transform = "rotate(0deg)"
},0)
},
Leave(el){
el.style.opacity=0
el.style.transform = "rotate(0deg)"
el.style.animationName='fadeIn'
el.style.animationDuration="1.5s"
// if you use css animation or transition, you don't need to
// care about setTimeout or done issue here
}
}Here I added the transition to <h1> also, to control the time of enter. You can use animationName to control the animation with CSS, too.
More details and usages of <Transition>
Attributions
duration
The easy way to control the duration of enter and leave, you can use it with String type time or Object way to rule the duration for each enter/leave
<transition duration="0.5s"></transition>
<transition :duration="{'enter':500,'leave':500}"></transition>appear, appear-, and v-on:appear-
Sometimes, we would do the transition as the page load in, at this time, the appear attribution is really helpful. Only need to put the appear in the <transition> tag, the browser will render your transition as page starting.
<transition appear enter-active-class="YOUR_ENTER_CLASS">
<!-- YOUR_ELEMENT_HERE -->
</transition>Also, you can add more detail control with appear-class, and JavaScript hooks.
<!-- the similar using way as enter/leave class-->
<transition
appear
appear-class=""
appear-active-class=""
appear-to-class=""
>
</transition><!-- You can use custum JavaScript hooks also--><transition
appear
v-on:before-appear=""
v-on:appear=""
v-on:appear-cancelled=""
>
</transition>
in-out & out-in mode
What’s the in-out/out-in? Before using it, let’s see two examples with simple v-if/v-else in <transition>
Different, huh? in-out/out-in attribution controls the timing between element switch, let next element get in at the proper timing. The out-in mode means after last element left, then the next element enters. The In-out mode reversed, but it uses seldom.
<transition mode="in-out"></transition>
<transition mode="out-in"></transition>v-if/v-else work
Typically, you can use both of v-if /v-else tag in <transition>, but you have to set the key for each tag because there is only one element can be allowed in <transition> usage.
<transition>
<h1 v-if="show" key="IF">I'm IF</h1>
<h1 v-else key="ELSE">now it's ELSE</h1>
</transition><transition> and Vue-component
The other way to use <transition> is the dynamic vue component. As you change or switch the component, you can use either transition class or JavaScript control in it.
<transition>
<component :is="YOUR_COMPONENT_NAME">
</transition>You don’t need to set the key for each element in <transition>, so it’s easier than other elements using, just use the component control and switch way typically, and set the animation with library or javascript hooks, then you can get it.
How to deal with v-for? Use <transition-group>
Smart as you will find that there is only one tag can be existing in <transition>, or like v-if/v-else adding key. So, how to deal with transition in v-for loop? <transition-group> is the way to go.
As similar as <transition>, <transition-group> has the same attributions, hooks and using, but it’s the real rending, you can use the tag attribution to change the element container.
Tag attribution and key in elements
For <transition-group>, it has a tag attribution to mention the element of this group, or you can think you set the element you like as the container here. If you don’t set anything, the default will be span.
<transition-group tag="div">
<!-- your list element -->
</transition-group>Now we have divtag in <transition-group>, you can find that in the developer tool. Afterward, because the v-for items are multi-items, we have to set the key for each item, too, then the transition function can recognize each item.
// Here we use <ul> as the sample tag
<transition-group tag="ul">
<li v-for="datas in list" :key="datas">
</transition-group>
// or you can use index and data in v-for
<transition-group tag="ul">
<li v-for="(datas,index) in list" :key="index">
</transition-group>
OK, Let’s take a look at the examples now!
List control transition
Here we’ll make a sample list to do the animation. Here we need a data array and a number, also, we need some click functions to control add, remove and reset.
<template>
<div>
<button @click="add()">random add</button>
<button @click="remove()">random remove</button>
<button @click="reset()">rest</button><transition-group tag="p" name="listing" class="numberlist">
<span v-for="datas in list" :key="datas">{{ datas }}</span>
</transition-group></div>
</template>
<script>
export default{
name:'Listcontrol',
data(){
return{
list:[0,1,2,3,4,5],
inputModel:6
}
},
methods:{
rIndex(){
// for random add or remove item from list
return Math.floor(Math.random()*this.list.length)
},
add(){
this.list.splice(this.rIndex(),0,this.inputModel++)
},
remove(){
this.list.splice(this.rIndex(),1)
},
reset(){
this.list = [0,1,2,3,4,5]
this.inputModel = 6
}}
}
</script>
Then, we need some style CSS to control our enter/leave animation.
<style>
.numberlist span{
display:inline-block;
margin-right: 10px;
transition: 0.5s ease-in-out;
}
.listing-leave-active{
position: absolute;
/* As the script dealing with leave phase, the position is absolute, it makes smooter transition*/
}
.listing-enter,.listing-leave-to{
opacity: 0;
transform: translateY(30px);
}
</style>
Review
<transition> is a really powerful function, you can make many and many amazing animations works by it, only your imagination matters. Next, we will learn the more complex animation using in Vue.js, the lottie in Vue. Thanks for your reading!
