CSS背景色转换不工作

其他一切都与过渡等有关。。。但是，当它设置

背景色时

不会褪色，只会立即改变颜色。有人有什么想法吗

小提琴：

menuBackground是设置的类

CSS:

---

有很多冗余代码。尝试简化这一点，加上你的JS代码似乎有缺陷。如果将jQuery选择器放入变量中，则无需将其包装在

$（）

..中。。。所以

$（header）

应该是

header

，它是

$（“body header”）

。关于转换不起作用，我想这是因为您重写了转换以设置特定属性的动画，而不是所有属性的动画。我建议您只需设置所有属性的动画，或者看看如何像这样转换各种属性：

transition:width 2s，height 2s，background color 2s，transform 2s使用逗号分隔不同的属性。很抱歉，刚接触JS的家伙们，请尝试一下，然后出错。。。我会尝试一下我们的建议，看看我是否能让它工作。我不知道如何添加所有的动画一起。。。对不起，我还在学习。
header {
    width: 100%;
      height: 100%;
      top: 0;

      -webkit-transition: height 0.5s;
      -moz-transition: height 0.5s;
      -ms-transition: height 0.5s;
      -o-transition: height 0.5s;
      transition: height 0.5s;

      -webkit-transition: top 0.5s;
      -moz-transition: top 0.5s;
      -ms-transition: top 0.5s;
      -o-transition: top 0.5s;
      transition: top 0.5s;

      background-color: transparent;
      -webkit-transition: background-color 1s ease;
      -moz-transition: background-color 1s ease;
      -ms-transition: background-color 1s ease;
      -o-transition: background-color 1s ease;
      transition: background-color 1s ease;

      .header-toolbar {
        -webkit-transition: top 0.5s;
        -moz-transition: top 0.5s;
        -ms-transition: top 0.5s;
        -o-transition: top 0.5s;
        transition: top 0.5s;
        top: 35px;
      }

      h1 {
        &.header-logo {
          img {
            display: inline-block;
            height: 72px;
            line-height: 72px;
            float: left;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
          }
        }
      }

      nav {
        &.header-desktop-nav {
          position: relative;
          top: 25px;

          ul {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
          }

          .header-nav-links {
            .home {
              padding-right: 26px;
            }
          }

        }
      }

      &.smaller {
        height: 100px;
        position: fixed !important;
        top: 0px;

        -webkit-transition: top 0.5s;
        -moz-transition: top 0.5s;
        -ms-transition: top 0.5s;
        -o-transition: top 0.5s;
        transition: top 0.5s;

        &.homepage {
          top: 42px;

          -webkit-transition: top 0.5s;
          -moz-transition: top 0.5s;
          -ms-transition: top 0.5s;
          -o-transition: top 0.5s;
          transition: top 0.5s; 
        }

        h1 {
          &.header-logo img {
            height: 45px;
            line-height: 45px;
          }
        }

        nav {
          &.header-desktop-nav {
            top: 10px;
          }
        }

        .header-toolbar {
          -webkit-transition: top 0.5s;
          -moz-transition: top 0.5s;
          -ms-transition: top 0.5s;
          -o-transition: top 0.5s;
          transition: top 0.5s;
          top: 50px !important;
          float: right;
          z-index: 1;
        }

      }

      &.menuBackground {
        background-color: #333333 !important;
        -webkit-transition: background-color 1s ease;
        -moz-transition: background-color 1s ease;
        -ms-transition: background-color 1s ease;
        -o-transition: background-color 1s ease;
        transition: background-color 1s ease;
      }

    }