Adding some fun to your app with CSS transitions

Transitions are effects that can be applied when elements are inserted, updated, and removed from the DOM.

For this recipe, we will build a little riddle for our friends to enjoy. When they want to know the solution, it will appear with a fading transition.

Getting ready

To complete this lesson, you should already know conditional display and conditional rendering. The Displaying and hiding an element conditionally recipe will teach you how to do that.

How to do it...

Let's set up the riddle in our HTML:

<div id="app"> 
  <article> 
    They call me fruit.<br> 
    They call me fish.<br> 
    They call me insect.<br> 
    But actually I'm not one of those. 
    <div id="solution" @click="showSolution = true"> 
      I am a <span id="dragon" v-show="showSolution">Dragon</span> 
    </div> 
  </article> 
</div>

The Vue instance is initialized very easily; you just have to write the following...