2017-12-27 385 views
0

我目前正在開發一個網站,我有一個問題與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。但我還沒有猜到我可以如何解決這個問題。

感謝任何幫助!

回答

0

我發現解決方案:我設置了最大高度,但我必須設置高度。因爲在前後狀態中都沒有設置的任何東西都不能動畫。此外:最大高度到高度也不會動畫。