带有Flex框的CSS动画搜索框

Question

我一直在尝试使这种布局在单击搜索图标时使搜索框具有动画效果。除两件事外，它的工作原理是这样。动画开始播放时，搜索图标迅速移到左侧，我希望它保持原位，并且搜索框向左侧延伸。这将在徽标切换到小版本的同时推送徽标。

任何指导将不胜感激。这是JSFIDDLE和代码：

HTML：              

        <button class="hamburger hamburger-cancel" id="menu-trigger">
            <span class="icon"></span>
        </button>

        <a id="site-logo" data-cy="site-logo" href="http://www.website.local">
            <img class="full-logo" src="https://www.tracetronic.com/cms/data/img/inhalte/Logos_TraceTronic/Logo_TEST-GUIDE_rgb_SCREEN.jpg" alt="Engineering360 Logo">
            <img class="logo-kite" src="http://i.imgur.com/w4MxJnp.png" alt="Engineering360 Logo Kite">
        </a>

        <form id="global-search-form" action="/search" data-cy="global-search-form">

            <input class="search-box catcomplete" type="text" name="query" required="" value="" data-cy="global-search-box">
            <input type="hidden" name="newSearch" value="new">
            <input class="submit" type="submit" value="">
        </form>

        <div class="header-reg-links">
            <img id="reg-trigger" data-cy="profile-popup-trigger" src="https://www.freeiconspng.com/uploads/profile-icon-9.png">
        </div>
    </div>
</header>

CSS / SCSS：

header {
    background: black;
    background-size: cover;
    box-sizing: border-box;
    padding: 0 .5em;
    position: relative;
    width: 100%;
    z-index: 10;

    #header-content {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        margin: 0 auto;
        max-width: 1140px;

        #site-logo {
            margin: .5em 2em;
            min-width: 0;
            flex-grow: 1;
            text-align: center;

            .logo-kite {
                display: none;
            }

            img {
                height: auto;
                width: 5em;
            }
        }

        .header-reg-links {
            align-items: center;
            display: flex;
            position: relative;

            #reg-trigger {
                cursor: pointer;
                margin-left: auto;
                min-width: 0;
                transition: opacity .3s;
                width: 2.25em;
                height: 1.75em;
                padding: 1em .25em;

                &:hover {
                    opacity: 0.9;
                }
            }
        }

        #global-search-form {
            align-items: center;
            display: flex;
            flex-flow: row nowrap;
            flex-grow: 0;
            font-size: 15px;
            min-width: 0;
            padding: 0 2em;
            margin: .5em 0;
            padding: 0 .5em;

           .nav-search-dropdown {
                display: none;
           }

           .search-box {
                background: #fbfbfb;
                box-sizing: border-box;
                border: 0;
                font-size: 15px;
                height: 2.25em;
                line-height: 2.25em;
                margin: 0;
                min-width: 0;
                flex: 0;
                max-width: 40em;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0;
                transition: width 1s;
                width: 0;
            }

            .submit {
                border: 0;
                border-radius: 0 3px 3px 0;
                box-sizing: border-box;
                cursor: pointer;
                height: 2.25em;
                font-size: 15px;
                min-width: 0;
                background: url("https://vignette.wikia.nocookie.net/deusex/images/9/9b/Magnifying_glass_icon.png/revision/latest?cb=20141205155051&path-prefix=en") center center / 1.65em no-repeat;
                padding: 0;
                width: 2em;
            }
        }

        &.search-open {

            #site-logo {
                flex: 0 0 2em;
                margin: 0 .5em;

                .logo-kite {
                    display: block;
                    width: 2em;
                }

                .full-logo {
                    display: none;
                }
            }

            #global-search-form {
                flex: 1 1 0;
                margin: 0;
                padding: 0;
                width: 16em;

                .search-box {
                    flex: none;
                    padding: .25em .5em;
                    width: 90%;
                }

                .search-trigger {
                    display: none;
                }
            }
        }
    }

    #menu-trigger {
        background: transparent;
        border: 0 none;
        cursor: pointer;
        display: inline-block;
        height: 1em;
        outline: none;
        padding: 0;
        transition: transform .2s ease-in-out;
        vertical-align: middle;
        flex: 0 0 1.25em;
        font-size: 1.5rem;
        margin: 0 .25em;
        width: 1.5em;

        &:before, &:after {
            content: "";
        }

        &:before, &:after, .icon {
            background: #FBFBFB;
            border-radius: .05em;
            display: block;
            height: .1em;
            margin: 0 0 .3em;
            transition: transform .2s ease-in-out;
            width: 100%;
        }

        &.menu-open:before {
            transform: translateY(.4em) rotate(135deg);
        }

        &.menu-open .icon {
             transform: scale(0);
        }

        &.menu-open:after {
            transform: translateY(-.4em) rotate(-135deg);
       }
    }
}

JQUERY：

$(function() {

    // Click event for profile icon. 
    $("#reg-trigger").click(function() {
        $("#header-content .header-reg-links").toggleClass("active");

        $(document).on("click.document", function(e) {
            var container = $("#header-content .header-reg-links");

            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0) {
                container.removeClass("active");
                // remove the click event on the document when it's no longer needed. 
                $(document).off("click.document");
            }
        });
    })

    // Opens main menu
    $("#menu-trigger").click(function() {
        $("html, #menu-trigger, #site-nav").toggleClass("menu-open");
    });

    // Header search bar toggle
    $("#global-search-form input.submit").click(function(e) {
        console.log($("#global-search-form input.search-box").val());
        if ($("#header-content").hasClass("search-open")) {
            if ($("#global-search-form input.search-box").val() == "") {
                e.preventDefault();
                $("#header-content").toggleClass("search-open");
            } else {
                return true;
            }
        } else {
            e.preventDefault();
            $("#header-content").toggleClass("search-open");
        }
    });
});