Home » vue » Animation in modal window using Vue.js doesn't work

Animation in modal window using Vue.js doesn't work

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m using Vue.js with Laravel and made modal window. All works well, there is no [Vue warn] indicated, but animation not working, i changed CSS many times.

I’m new to Vue and trying use this tutorial but it doesnt worked to me https://vuejs.org/v2/guide/transitions.html

View.php

<div id="modal" >
    <!-- app -->
    <a id="show-modal" @click="showModal = true; login = true; register = false">Login</a>
         <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>
</div>

app.js
new Vue({
    el: '#modal',
    data() {
        return {
            showModal: false,
            login: false,
            register: false,
        }
    },
});

Modal.component

<template>
    <transition name="slide-fade" mode="out-in">
       //--
    </transition>
</template>

<script>
    export default {
        name: 'modal',

        methods: {
            close() {
                this.$emit('close');
            },
            show() {
                this.$emit('show');
            },
        },
    };

</script>

UPD — this is CSS


    .modal-mask {
      position: fixed;
      z-index: 99999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
      display: table;
      transition: all 1s ease;
    }

    .modal-wrapper {
      display: table-cell;
      vertical-align: middle;
      transition: all 1s ease;
    }

    .modal-container {
      width: 700px;
      margin: 0 auto;
      transition: all 1s ease;
    }

    .slide-fade-enter-active {
      transition: all 1s ease;
    }
    .slide-fade-leave-active {
      transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
      transform: translateX(10px);
      opacity: 0;
    }
Answers:

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;
}