CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
svdwoude
svdwoude

Reputation: 553

transition hoooks only called when transition element is root element in component

I've noticed that transition hooks only get fired when the <transition> element is the root element in my component template. Is this by design? Am I missing something?

in my App.vue I have this template:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<example v-if = "checked"></example>

My component example.vue:

<template lang="html">

  <section class="example">
     <transition
        v-on:enter = "enter"
        v-on:leave = "leave">
        <div class = "transition-example"></div>
    </transition>
  </section>

</template>

<script lang="js">
  export default  {
    name: 'example',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {
      enter: function (el, done) {
        console.log("enter")
        done()
      },
      leave: function(el, done) {
        console.log("leave")
        done()
      }
    }
}
</script>

<style scoped >

</style>

In this current exmaple the enter and leave hooks are never executed when toggling the checkbox.

If I would update the template of example.vue to make sure the <transitions> element is the root element (as shown below) the enter and leave hooks are called.

<template lang="html">

  <transition
    v-on:enter = "enter"
    v-on:leave = "leave">
    <div class = "transition-example"></div>
  </transition>


</template>

I'd like to have more flexibility in where I put my <transition> element or have multiple transition element in a component, which all have their own hooks.

I'm assuming I am overlooking something that prevents me from doing this.

Upvotes: 1

Views: 605

Answers (1)

Max Sinev
Max Sinev

Reputation: 6019

I've noticed that transition hooks only get fired when the element is the root element in my component template. Is this by design? Am I missing something?

It's because of this line <example v-if="checked"></example>. v-if is applied to real root element of component so when transition is in root, v-if applied to div inside transition and it works fine, but in your first case v-if applied to section which is not under transition. So to make transition work you should provide v-if in element wrapped with transition tag, you can pass checked as prop to indicate visibility:

App.vue

...
<example :visible="checked"></example>
...

Example.vue

<template lang="html">
  <section class="example">
     <transition
        v-on:enter = "enter"
        v-on:leave = "leave">
        <div v-if="visible" class="transition-example"></div>
    </transition>
  </section>
</template>

Upvotes: 2

Related Questions