无法让 Vue.js 过渡到工作？

【问题标题】：Can't get Vue.js transition to work?无法让 Vue.js 过渡到工作？
【发布时间】：2016-11-05 12:00:08
【问题描述】：

我无法运行 vue.js（版本 1）转换。我从他们的网站上获取了他们的代码。它应该运行 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>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

使用 Vue.js 的过渡系统，您可以在将元素插入 DOM 或从 DOM 中删除时应用自动过渡效果。

transition 属性可以和：

如果
v-show
v-for

试试看：

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>

【讨论】：