Vue.js 2 Cookbook

There's more...

Transitions are cool, but there is a tree that is blocking our view in this recipe and it's ruining the transition's reputation; to follow along, consider the following HTML:

<div id="app">   <p>     Transitions are awesome, careful<br/>     please don't use them always.   </p>   <transition name="fade">     <img id="tree"       src="http://i.imgur.com/QDpnaIE.png"       v-show="show"       @click="show = false"/>   </transition> </div>

A little bit of CSS is as follows:

#tree {   position: absolute;   left: 7.5em;   top: 0em;   cursor: pointer; }  .fade-leave-active {   transition: opacity .5s;   opacity: 0 }

Finally, a simple Vue instance is required:

new Vue({     el: '#app',   data: {     show: true   } })

When we run the application, this is what we get: ...