休假时vuejs过渡回调问题

Question

我有这个带vuejs的简单动画，我试图在某些动画回调中更新组件的内部状态。我的目的是将房产进一步传递给儿童，并触发嵌套的休假过渡，但显然，我无法让它发挥作用。

• On出现/进入回调工作，属性按预期更新。
• 休假时，即使触发了回调且属性确实更新，模板也不会做出反应。

代码段有效，但如果需要http://jsfiddle.net/heyapo/bzor84a1/84/

，这里就是小提琴

＆＃13;

＆＃13;

Vue.component('child-view', {
  template: '#child-view',
  data() {
    return {
      status: 'hidden',
    }
  },
  methods:{
    beforeEnter(el) {
      this.status = "will enter";
    },
    enter(el, done) {
      this.status = "entering";
      setTimeout(()=>{
      	done();
      }, 1000);
    },
    afterEnter(el) {
      this.status = "entered";
    },
    beforeLeave(el) {
      this.status = "will leave";
    },
    leave(el, done) {
      this.status = "leaving";
      setTimeout(()=>{
      	done();
      }, 1000);
    },
    afterLeave(el) {
	  this.status = "hidden";
    }
  }
});

var demo = new Vue({
  el: '#demo',
	data: {
    showChild: false,
  },
  methods: {
  	onClick: function(){
    	this.showChild = !this.showChild;
    }
  }
})

＆＃13;

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s
}
.fade-enter,
.fade-leave-to,
.fade-leave-active{
  opacity: 0
}

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>
<template id="child-view">
  <transition 
    appear
    name="fade"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
  >
    <div>{{ status }}</div>
  </transition>
</template>
  
  
<div id="demo">
  <div >
    <child-view v-if="showChild"/>
  </div>
  <button v-on:click="onClick">
     toggle
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;