9

I want to set multiple transitions (on separate child elements) inside one parent v-if state change.

For example when I display a modal I want the background blur to fadeIn (using opacity) and the modal content to slideIn (using transition or animation). My current situation is the following, when I use the transition the background blur element (.modal) is transitioning along with the content (.modal__content):

<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
  <div class="modal" v-if="isVisible">
    <div class="modal__content">
      </slot><slot/>
    </div>
  </div>
</transition>
korun
  • 2,211
  • 1
  • 16
  • 12
  • korun, can you post your solution as an answer? – Engin Yapici May 22 '19 at 19:05
  • Haven't found anything useful at the time, the best way was to have a more JS based approach as its described in the answer below. I am working with React in the past year so I am probably out of date :) – korun May 23 '19 at 09:59

1 Answers1

2

You can use a JS hook after the .modal fades in to trigger the slide animation:

<template>
  <transition name="fade" @after-enter="showContent = true">
    <div class="modal" v-if="isVisible">
      <transition name="slide">
        <div class="modal__content" v-if="showContent">
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
    data() {
        return {
            isVisible: false,
            showContent: false
        };
    }
};
</script>
tony19
  • 125,647
  • 18
  • 229
  • 307
aprouja1
  • 1,800
  • 8
  • 17
  • 2
    Sorry I am late to respond. While interesting solution, I was looking for a parallel transitions of the elements, which I managed to implement using the `appear` property of the transition element. Also there are two caveats for this types of solutions - the code is verbose and there is not leave animation. – korun Apr 20 '18 at 19:05
  • 4
    @korun, if you found a satisfying solution, please [post it as an answer](https://stackoverflow.com/help/self-answer), so others may benefit from it as well :) – Eliran Malka Apr 30 '19 at 20:39