问题描述
我在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 (将#修改为@)