带有 svg 图像的 css 过渡仅适用于一种方式答案

【问题标题】：css transition with svg image only works one way带有 svg 图像的 css 过渡仅适用于一种方式
【发布时间】：2018-06-08 07:01:24
【问题描述】：

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

在该网站上，左侧有一个带有徽标的标题。当您向下滚动标题时，徽标会缩小。当您向下滚动特定数量的像素时，这在将 .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 代码

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 的事实有关。但我还没猜到我该如何解决它。

感谢任何帮助！

【问题讨论】：

标签： html css svg css-transitions

【解决方案1】：

我找到了解决方案：我设置了最大高度，但我必须设置高度。因为之前和之后状态中未设置的任何内容都无法设置动画。此外：max-height to height 也不能设置动画。

【讨论】：