css - Vue | Smooth transition between 2 full height elements

Question

I have been trying to trigger a transition on entry and leave of two elements which overlap each other.

The issue I'm having is that the second transition appears to just "appear" ontop of the other one, rather than animated on from the left.

It should go like the following:

View One -> View Two -> View One

But as of the third step, it just appears

new Vue({
  el: "#app",
  data: {
    viewOneActive: true,
  },
  methods: {
    toggle: function(){
        this.viewOneActive = !this.viewOneActive
    }
  }
})

.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.6s;
}
.menu-slide-enter,
.menu-slide-leave-active {
  opacity: 0;
}
.menu-slide-enter {
  transform: translate(-100%, 0);

}
.menu-slide-leave-active {
  transform: translate(100%, 0);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.5.2/tailwind.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="w-64 h-screen top-0 left-0 fixed relative" style="background-color: gray">
  <transition name="menu-slide">
    <div v-if="viewOneActive" class="relative h-screen w-full">
       <p>
         This is the first screen
       </p>

       <div @click="toggle" style="bottom: 0;" class="bottom-0 absolute w-full flex items-center justify-center mb-10 px-5">
         <div class="py-3 bg-blue-dark rounded-xl w-full cursor-pointer">
           <p class="text-center">
             Toggle View 2
           </p>
         </div>
       </div>
    </div>
  </transition>
  
  <transition name="menu-slide">
    <div v-if="!viewOneActive" class="relative h-screen w-full">
       <p>
         This is the second screen
       </p>

       <div @click="toggle" style="bottom: 0;" class="bottom-0 absolute w-full flex items-center justify-center mb-10 px-5">
         <div  class="py-3 bg-blue-dark rounded-xl w-full cursor-pointer">
           <p class="text-center">
             Toggle View 1
           </p>
         </div>
       </div>
    </div>
  </transition>
</div>

question from:https://stackoverflow.com/questions/65893951/vue-smooth-transition-between-2-full-height-elements

Answer 1

It's sliding in but you can't see it because it's happening underneath the other slide because they have CSS position: relative. Also you should have only one <transition> tag rather than one per slide.

• Change the slide class from relative to absolute
• Wrap both slides in one <transition> tag
• Give each slide a key so their DOM isn't reused

new Vue({
  el: "#app",
  data: {
    viewOneActive: true,
  },
  methods: {
    toggle: function(){
        this.viewOneActive = !this.viewOneActive
    }
  }
})

.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.6s;
}
.menu-slide-enter,
.menu-slide-leave-to {
  opacity: 0;
}
.menu-slide-enter {
  transform: translate(-100%, 0);
}
.menu-slide-leave-to {
  transform: translate(100%, 0);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.5.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="w-64 h-screen top-0 left-0 fixed relative" style="background-color: gray">
  <transition name="menu-slide">
    <div v-if="viewOneActive" class="h-screen w-full absolute" key="one">
       <p>
         This is the first screen
       </p>
       <div @click="toggle" style="bottom: 0;" class="bottom-0 absolute w-full flex items-center justify-center mb-10 px-5">
         <div class="py-3 bg-blue-dark rounded-xl w-full cursor-pointer">
           <p class="text-center">
             Toggle View 2
           </p>
         </div>
       </div>
    </div>

    <div v-if="!viewOneActive" class="h-screen w-full absolute" key="two">
       <p>
         This is the second screen
       </p>

       <div @click="toggle" style="bottom: 0;" class="bottom-0 absolute w-full flex items-center justify-center mb-10 px-5">
         <div  class="py-3 bg-blue-dark rounded-xl w-full cursor-pointer">
           <p class="text-center">
             Toggle View 1
           </p>
         </div>
       </div>
    </div>
  </transition>
</div>