CODEWITHSUNDEEP
javascriptvue.jsvue-component
75Kane
75Kane

Reputation: 119

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>

Upvotes: 2

Views: 127

Answers (1)

ABDEL-RHMAN
ABDEL-RHMAN

Reputation: 3024

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>

Upvotes: 2

Related Questions