vue 过渡组出现事件未被调用

Question

我正在尝试连接到 appear 事件生命周期并调用组件中的方法，但从未调用我组件中的方法 getCalled()。离开后事件的过渡动画按预期工作，只是出现事件没有。

根据文档https://vuejs.org/v2/api/#transition我可以像演示的那样连接到 appear 事件系统。

<transition-group name="order" tag="div" appear v-on:after-leave="activateScrollToBottom" v-on:after-appear="getCalled" v-on:before-appear="getCalled" v-on:appear="getCalled">

Answer 1

我遇到了类似的情况，发现我在 appear 方法中缺少 done 回调。

我整理了一个非常简单的 CodePen 看看它是否真的能用 https://codepen.io/rowild/pen/LJvEKm

JavaScript:

let app = new Vue({
  el: '#app',
  methods:{
    // Transition hooks
    beforeAppear(el){
      console.log('  BEFORE APPEAR')
    },
    appear(el, done){
      console.log('  APPEAR')
    },
    afterAppear(el){
      console.log('  AFTER APPEAR')
    }
  }
},
// Lifecycle hooks
beforeCreate(){
  console.log("BEFORE CREATE")
},
[...]

模板

<div id='app'>
  <transition
    appear
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
    @appear-cancelled="appearCancelled"
    :css="false"
  >
  <p>TEST CONTENT</p>
  </transition>
</div>

控制台输出

BEFORE CREATE
CREATED
BEFORE MOUNT
  BEFORE APPEAR
  APPEAR
  AFTER APPEAR
MOUNTED

如果您发现您的问题是什么，您介意 post 解释一下您是如何解决的吗？谢谢！

vue 过渡组出现事件未被调用

vue transition-group appear event not being called

transition

vuejs2