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