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

问题描述 投票:1回答:1

我目前正在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>
javascript css vue.js
1个回答
0
投票

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

在以下行中将v-if更改为v-show,这将使其不可见,但不会将其从DOM中删除:

<div class="menusite" v-if="active">
© www.soinside.com 2019 - 2024. All rights reserved.