Transition's hook creates issue once destroyed and called back

Question

I have a parent and child component, in child component I have a <transition> defined like this:

<template lang="pug">
  div
    transition(name="fade-transition" mode="out-in" v-on:after-enter="fnAfterEnter")
      h1(v-if"someCondition") lorem ipsum
</template>

<script>
  export default {
    methods: {
      fnAfterEnter () {
        do something here...
      }
    }
  }
</script>

The problem is, in parent component I have some functions that will mount and destroy the child component with simple v-if condition. Things will work just fine for the first time child component is mounted but once destroyed and mounted back again <transition>'s all the hooks (not just v-on:after-enter) doesn't trigger methods fnAfterEnter.

Thanks in advance :)

Could you elaborate more on the expected behavior and what behavior you're actually seeing? The description you provided is difficult to understand as is. — B. Fleming
@B.Fleming I fix the issue myself, posted the solution, pls have a look. — Syed

Syed Syed · Accepted Answer · 2018-05-11T19:13:25

I found that the issue was: the child component's transition was not completed and I was running some function in parent component to make child component's transition item condition true without using $nextTick but now I did like below code and the issue got fixed.

<script>
  export default {
    methods: {
      someFnInParent () {
        this.$nextTick(() => {
          this.$refs.childComp.someCondition = true
        })
      }
    }
  }
</script>

So, this.$nextTick(() => {}) helped me :)

Transition's hook creates issue once destroyed and called back

1 Answers