vue.js - 过渡转换不起作用

Question

我目前正在 vue.js 中制作我的第一个网站。我想将移动设备中的导航栏翻译为通过点击滑入和滑出。我的代码仅在显示元素时才有效。它有流畅的动画，但当滑出时，我的导航栏就消失了。我尝试了所有课程，请假，请假等。我不明白。我的子组件：

<template>
  <div class="menusite" v-if="active">
    <ul>
      <li v-for="site in siteList" :key= "site.id">
        {{ site.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'menusite',
  props: {
    active: Boolean,
  },
  data() {
    return {
      siteList: [
        { name: 'O nas' },
        { name: 'Oferta' },
        { name: 'Realizacje' },
        { name: 'Kontakt' },
      ],
    };
  },
};
</script>

我的父组件：

<template>
  <div class="navbar">
    <img src="@/assets/burger.png" alt="burger" class="burger" @click="active=!active">
    <NavbarLogo />
    <transition name="slide">
      <NavbarList :active="active" />
    </transition>
  </div>
</template>

<style lang="scss" scoped>
  .navbar {
    width: 100%;
    background-color: white;
    transition: 1.5s;
    position: absolute;
    z-index: 4;
    .burger {
    height: 60px;
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 10;
    }
    .slide-leave-active, .slide-enter-active {
      transition: all .8s ease;
    }
    .slide-enter, .slide-leave-to {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
</style>

Answer 1

您的元素没有out过渡，因为它会在 时从 DOM 中删除v-if="false"。

在以下行中更改v-if为v-show，这将使其在值为 时不可见false，但不会从 DOM 中删除，因此将应用转换：

<div class="menusite" v-if="active">

该问题也可能是由 CSS 样式引起的，下面是一个修改了 CSS 结构的工作示例：

代码笔： https: //codepen.io/AlekseiHoffman/pen/JjoXLxd

 <transition name="slide">
    <div class="menusite" v-if="active">
      <ul>
        <li v-for="site in siteList" :key="site.id">
          {{ site.name }}
        </li>
      </ul>
    </div>
 </transition>

 ...

 .slide-leave-active, .slide-enter-active {
   transition: all .8s ease;
 }
 .slide-enter, .slide-leave-to {
   transform: translateX(-100%);
   opacity: 0;
 }