使用SVG图像的CSS过渡只能以一种方式起作用

Question

我目前正在开发一个网站，在该网站上我有CSS过渡的问题。

在该网站上有一个标题，左侧有徽标。当您向下滚动时，徽标向下收缩。当您向下滚动一定数量的像素时，这可以在整个添加班级。

时。

现在的问题：当您向下滚动标头时，徽标会很好地缩小，但是徽标更改了大小，并且不会使动画缩小。相反，当您再次向上滚动时，.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代码

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

我找到了解决方案：我设置了最大高度，但是我必须设置高度。因为任何在前面和之后都无法设置的东西都不能动画。此外：最大高度无法动画。