created a custom directive to extend v-show , v-showblock is adding on true style: display: block;
The transitions/animations are working with v-show but not with v-showblock, which is working without animation.
I simplified my code to focus on the issue:
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<body>
<div id="demo">
<button @click="toggle">Toggle</button>
<transition name="fade">
<p v-showblock="show">hello</p>
</transition>
</div>
Vue.directive('showblock',
function (el, binding) {
if (binding.value === true) {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
);
new Vue({
el: '#demo',
data: {
show: true
},
methods: {
toggle: function() {
this.show =!this.show;
}
}
});
This isn't working because VueJS transitions work on elements within
<transition>only in certain situations:v-ifstate changesv-showstate changesIn your case you're attempting to hide/show using a custom directive
v-showblock, which is unsupported. If you instead usedv-iforv-showthere, then the transition will work.Read more in the VueJS docs.