Can't get Vue.js transition to work?

Question

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>

ABDEL-RHMAN · Accepted Answer · 2016-11-05 12:21:05Z

2

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>

answered Nov 5, 2016 at 12:21

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't get Vue.js transition to work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related