Question

我将Vue.js与Laravel结合使用，并制作了模态窗口。一切正常，没有显示[Vue警告]，但是动画不起作用，我多次更改了CSS。

我是Vue的新手，正在尝试使用本教程，但对我没有帮助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-这是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;
    }

Answer 1

您可能需要在过渡中包装实际的模态，然后将其从模态组件中删除，如下所示：

查看

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

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

使用Vue.js在模态窗口中播放动画不起作用

1 个答案: