Question

我目前正在开发一个网站，我遇到了css过渡问题。

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

现在的问题：向下滚动标题会很好地缩小，但徽标会立即改变它的大小并且不会缩小动画缩放。相反，当你再次向上滚动并删除.smaller类时，徽标确实可以很好地扩展和动画。

您可以在此处查看问题：https://callcenteroptimal.dev.itsmind.com/

HTML CODE

    <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

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

使用svg图像进行css转换只能单向工作

1 个答案: