[Vuejs]-Animation in modal window using Vue.js doesn't work

by

3👍

✅

You may need to wrap you actual modal in the transition and remove it from the modal component like this:

View

<div id="modal" >
    <!-- app -->
    <a id="show-modal" @click="showModal = true; login = true; register = false">Login</a>
    <transition name="slide-fade" mode="out-in">
        <modal v-if="showModal" @close="showModal = false">
          <div slot="body">
               <div id="login" v-show="login">                                                  
                    @include('login-form')
               </div>
               <div id="register" v-show="register">           
                    @include('register-form')
               </div>
          </div>
        </modal>
    </transition>
</div>

Example CSS

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
👤CUGreen

Leave a comment