css-animations - 布尔玛导航菜单动画

Question

好的。我不能是唯一一个将 Bulma 与 Vue.js 3 一起使用的人。因此，我只想为 navbar-menu 下拉菜单设置动画。对于 < 1024px 的屏幕，您添加 this-active类，这将添加display: block到navbar-menu. 这适用于汉堡按钮上的切换器。现在，我想制作动画并发现 vue 转换不起作用，因为不满足先决条件：

Vue 提供了一个过渡包装组件，允许您在以下上下文中为任何元素或组件添加进入/离开过渡：

• 条件渲染（使用 v-if）
• 条件显示（使用 v-show）
• 动态组件
• 组件根节点

相反，我只想测试一个简单的过渡，但即使这样也行不通：

.navbar-menu {
  background: white;
  transition:  1s;
}

.navbar-menu.is-active {
  background: red;
} 

我以某种方式看到了 DOM 动画，但背景立即变成了红色......

这是我的完整组件：

<template>
  <header>
    <nav class="navbar is-fixed-top container" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <div class="logo-text">CVMaker</div>
        </a>

        <a role="button"
           @click="toggleMenuActive"
           class="navbar-burger"
           v-bind:class="{'is-active': isActive}"
           aria-label="menu"
           aria-expanded="false"
           data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
        <div class="navbar-menu" v-bind:class="{'is-active': isActive}">
          <div class="navbar-end">
            <router-link to="'/" class="navbar-item">CVs</router-link>
            <router-link to="/about" class="navbar-item">About</router-link>
            <a v-if="getLoggedIn" v-on:click.prevent="onLogout" class="navbar-item">Log out</a>
          </div>
        </div>
    </nav>
  </header>
</template>

<script>

import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'Header',
  computed: mapGetters(['getLoggedIn', 'getAuthState']),
  methods: {
    ...mapActions(['logout']),
    toggleMenuActive() {
      this.isActive = !this.isActive;
    },
    onLogout(){
      this.logout(this.getAuthState.userId)
      this.toggleMenuActive()
    },
    beforeEnter(el) {
      console.log(el)
    }
  },
  data() {
    return {
      isActive: false
    }
  }
}

</script>

<style scoped lang="scss">

.navbar-menu {
  background: white;
  transition:  1s background;

}

.navbar-menu.is-active {
  background: red;
}

header {
  background: white;
  box-shadow: 0 2px 5px rgba(70,130,180, 0.25);
//  position: fixed;
//  width: 100%;
//  top: 0;
}
.logo-text{
   color: steelblue;
   font-weight: bolder;
   font-size: 1.5rem;
}
</style>

有任何想法吗？必须有一个解决方案。我想人们会想要为他们的汉堡包/下拉菜单制作动画......

标签： css-animationsvuejs3bulma