Trigger all <transition>s without a corresponding v-if/v-show on component mounting

What problem does this feature solve?

A <transition> without a corresponding v-if/v-show not at the component’s template’s root will never be triggered. This may be by design, but it is confusing because a <transition> at the component’s template’s root does get triggered when the component is mounted.

What does the proposed API look like?

When the following modal’s template is mounted/destroyed, the dynamic fade-in-* classes are applied correctly, but the inner “slide-up” effect is never triggered. I propose that all <transition>s (including the inner ones) that do not have an associated v-for/v-if/etc be triggered on component mounting (& before destroy).

<template>
<transition name="fade-in">
  <div class="modal-backdrop">

    <transition name="slide-up">
      <div v-show="show" class="modal" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <slot></slot>
          </div>
        </div>
      </div>
    </transition>

  </div>
</transition>
</template>

Currently, I’m using the following workaround, with the parent calling the close method via $refs and listening for 'close' before destroying the modal.

<script>
export default {
  data() { return { show: false } },
  mounted() {
    this.show = true
  },
  methods: {
    close() {
      this.show = false
      this.$nextTick(() => this.$emit('close'))
    }
  }
}
</script>

[sirlancelot]

Does adding appear to the <transition> fix the problem?

[ezracelli]

I will take this to StackOverflow, but here is a sandbox showing what I mean. The transition classes are applied to the inner transition properly on entering, but not on leaving. https://codesandbox.io/s/961npvk3o

---

---