css - Vue2 v-if 使我的转换不起作用

Question

我目前在一个元素上有一个 v-if 指令，该元素是一个用于显示购物车的灯箱。

点击导航栏上的“查看购物车”按钮，灯箱的状态将激活 v-if 语句。

所有这些都工作正常，但我还尝试将一个附加类切换到名为“visible”的灯箱元素，这将激活不透明度的过渡以提供淡入/淡出效果。

但是，我目前得到的是 v-if 使我的灯箱购物车立即出现。有没有办法让我的转换与 v-if 一起工作？

下面是我的代码:

<template>
    <div class="full-page">
        <navbar @openCart="toggleCart"/>
        <product />
        <div class="lightbox"
            v-if="lightboxCart"
            :class="{visible: lightboxCart}">
            <cart
                @closeCart="toggleCart"/>
        </div>
    </div>
</template>

<script>
export default {
    head() {
        return {
            title: 'Totonou',
            meta: [
                {
                    hid: 'description',
                name: 'description',
                content: 'Customizable Jewelry Organizer'
                }
            ]
        }
    },
    data() {
        return {
            lightboxCart: false
        }
    },
    components: {
        'navbar' : require('@/components/AppHeader.vue').default,
        'product' : require('@/components/ProductPage/Product.vue').default,
        'cart' : require('@/components/CartPage/Cart.vue').default,
    },
    methods: {
        toggleCart() {
            this.lightboxCart = !this.lightboxCart
        }
    }
}
</script>

<style scoped>
    .fullpage {
        position: relative;
    }
    .lightbox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: 0.8s all cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    .lightbox.visible {
        opacity: 1;
    }

</style>

Answer 1

您可以使用vue transitions :

new Vue({
  el: "#demo",
  data() {
    return {
      lightboxCart: false
    }
  },
  methods: {
    toggleCart() {
      this.lightboxCart = !this.lightboxCart
    }
  }
})

.fullpage {
    position: relative;
}
.lightbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    /* opacity: 0; */
    transition: 1.8s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
.lightbox.visible {
  /* opacity: 1; */
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="full-page">
    <button @click="toggleCart">show</button>
    <transition name="fade">
      <div class="lightbox"
          v-if="lightboxCart"
          :class="{visible: lightboxCart}">
      </div>
    </transition>
  </div>
</div>