Question

我在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添加过渡吗？

如何将vue过渡添加到buefy导航栏

0 个答案: