Vue 2.0 Hello World
HTML
<script src="https://unpkg.com/vue"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade-overlay">
<div class="overlay" v-if="show"></div>
</transition>
</div>
CSS
.overlay {
width: 50px;
height: 50px;
background-color: red;
opacity: 0.5;
}
.fade-overlay-enter,
.fade-overlay-leave-to {
opacity: 0;
}
.fade-overlay-enter-active,
.fade-overlay-leave-active {
transition: opacity 2s;
}
JavaScript
new Vue({
el: '#demo',
data: {
show: false
}
})