如何解决如何将vue过渡添加到buefy导航栏
我在Nuxt SSR项目中使用Buefy NAVBAR
我想向该导航栏添加过渡
template
b-navbar
template(slot='brand')
b-navbar-item(tag='router-link',:to="{ path: '/' }")
img(src='https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png',alt='Lightweight UI components for Vue.js based on Bulma')
template(slot='start')
b-navbar-item(href='#')
| Home
b-navbar-item(href='#')
| Documentation
b-navbar-dropdown(label='Info')
b-navbar-item(href='#')
| About
b-navbar-item(href='#')
| Contact
template(slot='end')
b-navbar-item(tag='div')
.buttons
a.button.is-primary
strong Sign up
a.button.is-light
| Log in
- 我尝试添加提到的HERE过渡，但它不起作用
具有过渡功能的代码
<template lang="pug">
transition(name="nav-fade" mode="out-in")
b-navbar(fixed-top)
template(slot='brand')
b-navbar-item(tag='router-link',:to="{ path: '/' }")
img(src='https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png',alt='Lightweight UI components for Vue.js based on Bulma')
template(slot='start')
b-navbar-item(href='#')
| Home
b-navbar-item(href='#')
| Documentation
b-navbar-dropdown(label='Info')
b-navbar-item(href='#')
| About
b-navbar-item(href='#')
| Contact
template(slot='end')
b-navbar-item(tag='div')
.buttons
a.button.is-primary
strong Sign up
a.button.is-light
| Log in
</template>
<style lang="scss">
.nav-fade-enter-active,.nav-fade-leave-active {
transition-duration: 2s;
transition-property: height,opacity;
transition-timing-function: ease;
overflow: hidden;
}
.nav-fade-enter,.nav-fade-leave-active {
opacity: 0;
}
</style>
有人可以指出如何向Navbar添加过渡吗？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。