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

[ezracelli]

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?

[posva]

Use appear in the nested transition (more info in the docs)

[ezracelli]

The nested<transition appear> does not apply the transition classes when the node leaves the DOM, as would seem to be indicated in the docs.

By default, this will use the transitions specified for entering and leaving.

Does this mean there is a bug, or am I not understanding how to use appear?

[posva]

appear is when it render the dom for the first time as it's already visible. for leaving nested transitions you will have to make sure durations are applied correctly

[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

---

---