html - 带有 svg 图像的 css 过渡只能以一种方式工作

Question

我目前正在开发一个网站，但我遇到了 css 转换问题。

在该网站上，左侧有一个带有 Logo 的标题。当您向下滚动标题时， Logo 会缩小。当您向下滚动特定数量的像素时，这会在将类 .smaller 添加到标题的整个过程中起作用。

现在的问题:当您向下滚动时，标题会很好地缩小，但 Logo 会立即更改其大小并且不会按比例缩小动画。相反，当您再次向上滚动并且 .smaller 类被删除时， Logo 确实可以很好地放大并具有动画效果。

您可以在此处描述问题: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 代码

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

我找到了解决方案:我设置了最大高度，但我必须设置高度。因为任何未设置在之前和之后状态的东西都不能被激活。此外:max-height 到 height 也不能​​设置动画。