V-show suavemente animado en VueJS
Estaba tratando de animar dos divs usando la transición en Vuejs. A continuación se muestra el código (jsfiddle) que he usado. Pero no sé por qué no funciona.
https://jsfiddle.net/k6grqLh1/16/
vue
<div id="vue-instance">
<div>
<transition name="fade">
<div v-show="show">
<div class="box yellow"></div>
</div>
</transition>
<transition name="fade">
<div v-show="!show">
<div class="box blue"></div>
</div>
</transition>
<a href="#" @click="show = !show">Change</a>
</div>
</div>
css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
.box {
width:200px;height:200px;
}
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
js
var vm = new Vue({
el: '#vue-instance',
data: {
show: true
}
});