Question

我试图挂钩到出现的事件生命周期并调用组件中的方法，但我的组件中的方法getCalled（）从未被调用过。事后事件的过渡动画按预期工作，它只是不出现的事件。

根据文档https://vuejs.org/v2/api/#transition我可以在演示的事件系统中挂钩。

<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

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

我整理了一个非常简单的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

万一发现问题所在，您是否愿意发表解释以及如何解决？谢谢！

vue transition-group出现事件未被调用

1 个答案: