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

【问题标题】：Vue2 v-if is making my transition not workVue2 v-if 使我的转换不起作用
【发布时间】：2022-04-13 18:19:29
【问题描述】：

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

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

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

但是，我目前得到的是 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>

【问题讨论】：

标签： css vue.js vuejs2 css-transitions

【解决方案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>

【讨论】：

【解决方案2】：

Css 过渡不适用于v-if，因为它不仅会改变元素的可见性，还会将其从 dom 中完全移除。您可以使用 Vue 过渡；代码如下：

<transition name="fade">
  <div
    class="lightbox"
    v-if="lightboxCart"
    :class="{visible: lightboxCart}"
  >
     <cart @closeCart="toggleCart"/>
  </div>
</transition>

您还应该添加与此转换相关的 css 类：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

我在这里使用了fade 过渡，但您可以选择其他过渡，或创建自己的过渡。以下是相关链接：

Vue Transitions

【讨论】：