svgイメージを使用したCSSトランジションは一方向にしか動作しません。

Question

私は現在、CSSトランジションに問題があるウェブサイトを開発中です。

このウェブサイトには、左側にロゴのヘッダーがあります。ヘッダーを下にスクロールすると、ロゴが縮小します。これは、特定の量のピクセルをスクロールダウンしたときに、ヘッダーにクラス.smallerを追加するときに機能します。

問題が発生しました：ヘッダーを下にスクロールするときれいに縮小されますが、ロゴは即座にサイズが変更され、アニメートされません。逆にスクロールアップすると、.smallerクラスgetが削除され、ロゴはきれいに拡大され、アニメーション化されます。

あなたがここでの問題を描くことができます：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を使用しています。しかし、私はそれを修正する方法を推測していない。

ありがとうございました！

Answer 1

私は解決策を見つけました：最大高を設定しましたが、高さを設定する必要があります。前と後の両方の状態に設定されていないものはアニメ化できないためです。さらに、最大高さまでの高さはアニメ化することができます。