html - CSS 过渡属性不适用于 header 标签

Question

有人能告诉我为什么过渡属性似乎不适用于我网站上的 header 标签吗:http://www.hccoinc.com/about/

我有一个粘性(固定)菜单，滚动一段时间后我会缩小它。一切正常，除了菜单上的过渡属性 - 高度变化应该在 0.3 秒内过渡，但它会立即发生。

这是 html 结构:

<header id="masthead" class="site-header" role="banner">
  <div class="container">
    <a class="site-branding" rel="home" title="HCCO, Inc. (WOSB)" href="http://www.hccoinc.com/">
      <h1 class="site-title">
      <h2 class="site-description">Piecing IT Together</h2>
    </a>
    <nav id="site-navigation" class="site-primary-navigation slide-left">
      ...
    </nav>
  </div>
</header>

这是相关的 CSS:

.site-header {
  position: fixed;
  width: 100%;
}

.site-main {
  margin-top: 107px;
}

header, header .site-title img {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header.site-header.smaller {
  height: 55px;
  background: rgba(51, 153, 204, 0.93);
}

header.site-header.smaller .container {
  padding: 0;
}

header.site-header.smaller .site-title img {
  max-height: 54px;
}

谢谢。

Answer 1

我想通了。由于其他原因，我不得不将背景颜色应用到 .container div，然后我将过渡时间应用到 .container 高度，它现在可以正常工作了。