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.
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.
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...