Nrthugu

Could someone explain me, why the following code doesn't work?

<template>

  <div class="modal">

    <transition name="slide-in">

      <div @click.stop class="modal__container">

        <div @click="close" class="modal__button">

          <span class="modal__button--close">Close</span>

        </div>

      </div>

    </transition>

    <transition name="fade-in">

      <div @click="close" class="modal__overlay"/>

    </transition>

  </div>

</template>

I'm trying to create modal with two different animations (slide-in for text area and fade-in for modal overlay).

If i delete the element with class modal and edit code to the following everything works fine.

<template>

   <transition name="slide-in">

     <div @click.stop class="modal__container">

       <div @click="close" class="modal__button">

         <span class="modal__button--close">Close</span>

       </div>

     </div>

   </transition>

</template>

Referencing Vue.js documentation on transitions

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM

That means that DOM nodes that transition applies classes to, should be those which are inserted/updated/removed.

Since it is a modal window, I assume that it has v-if directive applied in parent component to handle it's visibility. In order for transition to work, it should wrap DOM element that will be updated.

You can understand it more easily if you move code of your modal window into the parent component. Just for better visualization of elements tree and transition's behavior.

In first example, conditional rendering (v-if) applies to <div class="modal">, which is not wrapped with transition - therefore no animation will be triggered. At the same time, nested nodes are wrapped with transition, but there is nothing that will update or remove them. They are statically displayed and inserted initially on component's creation. Nothing to animate.

In order for for it to work as expected following structure would be advisable:

<template> 

  <transition name="fade-in">

    <div 

      class="modal__overlay"

      @click="close"

    >

      <transition name="slide-in">

        <div 

          v-if="containerVisible"

          class="modal__container"

          @click.stop

        >

          <div @click="close" class="modal__button">

            <span class="modal__button--close">Close</span>

          </div>

        </div>

      </transition>

    </div>

  </transition>

</template>

This solution expects modal__overlay to have position: fixed; style and variable containerVisible to be set to true inside mounted hook of modal component.