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 转换，因为当v-if="false" 时它已从DOM 中移除。

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

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

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

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