css过渡与svg图像只能作用一种方式

我目前正在开发一个网站，我有一个问题与CSS过渡。css过渡与svg图像只能作用一种方式

在该网站上，左侧有一个带有徽标的标题。当您向下滚动页眉并且徽标缩小时。当您向下滚动特定数量的像素时，这可以在整个页面中添加.smaller类。

现在的问题：当您向下滚动标题时，会很好地缩小标题，但徽标会立刻改变它的大小，并且不会缩小动画。相反，当你再次向上滚动并且.smaller类被删除时，标志会很好地放大和动画。

你能想象这里的问题：https://callcenteroptimal.dev.itsmind.com/

HTML代码

<header> 
    <div class="outer-container"> 
     <div class="width-3-logo"> 
      <img src="images/callcenter-optimal-logo.svg" alt="Callcenter Optimal Logo" /> 
     </div> 
     <nav class="width-9-menu"> 
      <input type="checkbox" id="nav" class="hidden" /> 
      <label for="nav" class="nav-open"><i></i><i></i><i></i></label> 
      <div class="nav-container"> 
       <ul> 
        <li><a href="">Links...</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</header>

相关SASS CODE

header { 
    position: fixed; 
    width: 100%; 
    z-index: 999; 
    height: 82px; 
    background: #fff; 
    transition: height 0.5s; 

    img { max-height: 64px; width: 99px; margin: 9px 0 0 9px; transition: height 1s ease, width 1s ease; } 

    @include grid-media($large-screen-up) { 
     img { max-height: 136px; width: 205px; margin-top: 0.9em; } 
    } 

    &.smaller { 
     height: 65px; 
     img { height: 46px; width: 72px; } 
     .nav-open { 
      top: 10px; 
     } 
     @include grid-media($large-screen-up) { 
      img { height: 75px; width: 116px; transition: height 1s ease, width 1s ease; } 
      nav { 
       ul { 
        li { line-height: 65px; } 
       } 
      } 
     } 
    } 
}

我认为这个问题有事情做与事实我正在使用svg。但我还没有猜到我可以如何解决这个问题。

感谢任何帮助！

来源

2017-12-27 im-fabian

我发现解决方案：我设置了最大高度，但我必须设置高度。因为在前后状态中都没有设置的任何东西都不能动画。此外：最大高度到高度也不会动画。

来源

2017-12-27 20:16:58

css过渡与svg图像只能作用一种方式

回答

相关问题