css transition with svg image only works one way

html css svg css-transitions

50 观看

1回复

1 作者的声誉

I am currently developing a website where I have a problem with css transition.

On that website there is a header with a logo on the left. As you scroll down the header and the logo shrinks down. This works throughout adding the class .smaller to the header when you have scrolled down a specific amount of pixels.

The Problem now: When you scroll down the header nicely shrinks but the logo changes it's size imediately and does not scale down animated. In opposite when you scroll up again and the .smaller class get's removed the logo does scale up nicely and animated.

You can picture the problem here: 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>

RELATED 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; }
                }
            }
        }
    }
}

I think the problem has something to do with the fact that I am using an svg. But I haven't guessed how I may fix it.

Appreciate any help!

作者: im-fabian 的来源 发布者: 2017 年 12 月 27 日

回应 1


0

1 作者的声誉

I found the Solution: I set the max height, but I have to set height. Because anything that is not set in both the before and the after state cant be animated. And furthermore: max-height to height cant be animated either.

作者: im-fabian 发布者: 2017 年 12 月 27 日
32x32