Enter and Leave Transitions

Enter and leave using CSS transitions

 We can use CSS to achieve enter and leave transitions like the above. CSS transitions are written inside the style tags. Let’s see one more example of this. 

src/App.vue

The previous component has been commented out. Import the component Introduction.vue and register it under App.vue components. Let the styles be same as the previous code.

<template>  <div>    <h1>Enter and Leave Transitions</h1>    <Introduction/>  </div> </template> <script> import Introduction from "./components/Introduction.vue" export default{  name:"App",  components:{    Introduction,  } } </script>

src/components/Introduction.vue

Here, the transition has been given the name slidedown (You can give any name of your choice to the transition). So, when writing the transition class, we prefix slidedown-. By default, when we don’t name the transition, v- is prefixed, as we saw in the example above.

In the code below:

- Clicking the button calls the handleShowMessage() function, making the introduction-msg-div enter and leave the component. It also makes the button text toggle between display and hide message.

Rotate and translate transforms have been applied to the transition classes. The div appears to have a hinge on top; the div drops vertically whenever the display message is clicked and goes back to its original horizontal position whenever the hide message button is clicked.

-The enter and leave transitions take 2 seconds each with ease to complete.

<template>  <div>    <transition name="slidedown">      <div id="introduction-msg-div" v-if="showMessage">      <h2>Let us learn about enter and leave transitions!</h2>      </div>     </transition>    <div><button id="intro-btn" @click="handleShowMessage()">{{buttonText}}</button></div>  </div> </template> <script> import {ref} from "vue" export default{  setup(){    const buttonText=ref("Display Message")    const showMessage=ref(false)    function handleShowMessage(){      if(showMessage.value==true){        showMessage.value=false        buttonText.value="Display Message"      }else{        showMessage.value=true        buttonText.value="Hide Message"      }    }    return {showMessage,handleShowMessage,buttonText}  } } </script> <style> #intro-btn{  position:absolute;  top:350px;  margin:auto;  transform:translateX(-100px) } #introduction-msg-div{  background-color:#ff007f;  padding:20px;  margin:30px;  border-radius:30px;  width:50%;  display:inline-block; } .slidedown-enter-from{  transform:rotateX(90deg) translateZ(100px); } .slidedown-enter-to{  transform:rotateX(0deg) translateZ(0px); } .slidedown-enter-active{  transition: all 2s ease; } .slidedown-leave-from{  transform:rotateX(0deg) translateZ(0px); } .slidedown-leave-to{  transform:rotateX(90deg) translateZ(100px); } .slidedown-leave-active{  transition: all 2s ease; } </style>

Enter transition (After first button click)

 

Leave transition (After second button click)

 

 

Enter and leave transition using CSS animations (Keyframes)

src/App.vue

Lets comment out or delete Opacity.vue and Introduction.vue so that it doesn’t interfere with the Keyframes.vue code.

<template>  <div>    <h1>Enter and Leave Transitions</h1>    <Keyframes/>  </div> </template> <script> import Keyframes from "./components/Keyframes.vue" export default{  name:"App",  components:{    Keyframes,  } } </script>

src/components/Keyframes.vue

Here, for enter transition we have applied keyframe animations. So in pop-enter-active class, instead of transition, we have written animation. We have named the keyframe animation as grab-attention.

<template>  <div>   <button @click="show=!show">Click Me</button>   <div>     <transition name="pop">      <div id="attention-div" v-if="show">ATTENTION</div>      </transition>   </div>  </div> </template> <script> import {ref} from "vue" export default{  setup(){    const show= ref(false)    return{show}  } } </script> <style> #attention-div{  background-color:red;  margin:30px;  width:230px;  padding:30px;  display:inline-block;  box-shadow:none;  font-weight:bold;  letter-spacing:2px; } .pop-enter-active{  animation:grab-attention 2s ease; } .pop-leave-to{  opacity:0;  transform:rotateZ(45deg) translateY(50px) translateX(30px) } .pop-leave-active{  transition:all 1s ease-in-out; } @keyframes grab-attention{  0%{width:0px}  25%{width:200px}  50%{width:0px}  75%{width:290px}  100%{width:230px} } </style>

Enter transition with keyframe animation (after first button click)

0%{width:0px}                                          25%{width:200px}

 

50%{width:0px}                                        75%{width:290px}

 

100%{width:230px}

Leave transition without keyframes (after second button click)

 

 

Enter and leave transition using javascript hooks

We can use javascript hooks as attributes, too, for the transitions. The following are some of the attributes:

• before-enter
• enter
• after-enter
• before-leave
• leave
• after-leave

Let us see, with an example, how to use it. 

src/App.vue

<template>  <div>    <h1>Enter and Leave Transitions</h1>    <JavascriptHooks/>  </div> </template> <script> import JavascriptHooks from "./components/JavascriptHooks.vue" export default{  name:"App",  components:{    JavascriptHooks  } } </script>

src/components/JavascriptHooks.vue

Here, Velocity.js has been used to give style to the elements on transition. Velocity.js is similar to jQuery’s animate function, and it is speedy.

<template> <div id="js-hooks-div" class="demo">  <button @click="show = !show">    Click me!  </button>  <transition    @before-enter="beforeEnter"    @enter="enter"    @leave="leave"    @css="false"  >    <p v-if="show">      Pretty cool haah!!    </p>  </transition> </div> </template> <script>  export default{  el: '#js-hooks-div',  data(){    return{    show: false}  },  methods: {    beforeEnter: function (el) {      el.style.opacity = 0    },    enter: function (el, done) {      Velocity(el, { opacity: 1, fontSize: '10px' }, { duration: 300 })      Velocity(el, { fontSize: '40px' }, { complete: done })    },    leave: function (el, done) {      Velocity(el, { opacity: 1, fontSize: '20px' }, { duration: 300 })      Velocity(el, {translateY: '40px',opacity: 0}, { complete: done })    }  }  } </script>speedy

beforeEnter (Opactity:0)                       enter(opacity:1; fontSize:10px)

 

enter(fontsize:40px)                                     leave(opactiy:1; fontSize:20px)

 

leave(translateY:40px; opacity:0)

Using mode to transition between elements

Look at the following code:

src/components/Modes.vue

In this code we want our compile button to transition into run button when we click it and vice versa. However when we run this code our transition does not look so smooth. Let us have a look.

<template> <transition name="change-status">   <button v-if="status" key="compile" @click="status=!status" id="blue">    Compile  </button>  <button v-else key="run" @click="status=!status" id="green">    Run  </button> </transition> </template> <script> export default{ data(){  return{    status:true  } } } </script> <style scoped>  .change-status-enter-active, .change-status-leave-active {  transition: opacity 0.3s ease; } .change-status-enter, .change-status-leave-to{  opacity: 0; } #blue{  background-color:cyan;  color:teal;  box-shadow:0px 0px 30px cyan; } #green{  background-color:#00FF00;  color:darkgreen;  box-shadow:0px 0px 30px #00FF00; } </style>

 

 

As we can see from the above transition, the compile button leave transition happens simultaneously as the run button enter transition. This is undesirable as we want the compile button to disappear entirely, and only then the run button should appear. 

Here, the out-in mode of transition comes to the rescue! The out-in mode means that the current element will transition out first, then when it is completed, the new element will transition in. Just add the mode to the above code:

<transition name="change-status" mode="out-in"> . . . </transition>

src/App.vue

<template>  <div>    <h1>Enter and Leave Transitions</h1>    <Modes/>  </div> </template> <script> import Modes from "./components/Modes.vue" export default{  name:"App",  components:{    Modes  } } </script>

 

There is one more mode: in-out mode, which makes the second element enter transition first then makes the first element leave transition.

FAQs

1. When using Javascript hooks as attributes for transition, why is it advised to add v-bind:css=” false” explicitly?

Adding v-bind:css=” false” in the transition attribute prevents the CSS styles from interfering with javascript transitions.

2. What should we do if we want to apply transitions only on the initial render of an element?

We can use the appear attribute when we want the transitions to be applied only on the initial render of the element. Like so,

<transition appear> <!-- element to be transitioned --> </transition>

3. Why do we need done callbacks when using javascript-only transitions?

The done callbacks are required for the entry and leave hooks when utilizing JavaScript-only transitions because otherwise, the hooks will be invoked synchronously, and the transition will be completed immediately.

Key Takeaways

From this article, we learned about entry and leave transitions. We learned how they are used with CSS transitions and animations. We also saw how to use Javascript hooks as attributes for transition. We looked at why we need the mode attribute in transition and how to use it. 

But this is not enough; you need something extra to excel in Vue.js truly. If you want to learn more about Vue.js, you can read our articles on Vue.js or take our highly curated Web Development course.