我目前正在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>
您的元素没有out
过渡,因为在v-if="false"
时它已从DOM中删除。
在以下行中将v-if
更改为v-show
,这将使其不可见,但不会将其从DOM中删除:
<div class="menusite" v-if="active">