75Kane 75Kane - 29 days ago 8
Javascript Question

Can't get Vue.js transition to work?

I can't get a vue.js (version 1) transition to run. I took their code from their site. It should run the javascript console.logs!



Vue.transition('fade', {
css: false,
enter: function (el, done) {
console.log('enter');
},
enterCancelled: function (el) {
console.log('enterCancelled');
},
leave: function (el, done) {
console.log('leave');
},
leaveCancelled: function (el) {
console.log('leaveCancelled');
}
});

var Vue = new Vue({
el: '#app',
data: {

}
});

<div id="app">
<p transition="fade">test fade</p>
</div>




Answer

With Vue.js’ transition system you can apply automatic transition effects when elements are inserted into or removed from the DOM.

The transition attribute can be used together with:

  • v-if
  • v-show
  • v-for

Try that :

Vue.transition('fade', {
    css: false,
	enter: function (el, done) {
		console.log('enter');
	},
	enterCancelled: function (el) {
		console.log('enterCancelled');
	},
	leave: function (el, done) {
		console.log('leave');
	},
	leaveCancelled: function (el) {
		console.log('leaveCancelled');
	}
});

var Vue = new Vue({
	el: '#app',
	data: {
		show: false
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>

<div id="app">
    	<button @click="show = !show">{{ show ? 'hide' : 'show' }}</button>
        <p v-show="show" transition="fade">test fade</p>
</div>

Comments