如何防止动画图标从输入框中流出

Question

我有一个输入框，里面有一个搜索图标。当用户在输入字段内单击时，图标会向左淡出，这样做时，它会从输入框中溢出。

有什么办法可以防止搜索图标流血吗？我不希望图标超出输入框的边界可见。

cshtml 页面:

<header>
   <nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
      <div class="search-bar center">
         <img  id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
         <input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
      </div>
   </nav>
</header>

js:

$('#searchBox').on({
    focus: function () {
        document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
        document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
    },

    blur: function () {
        document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
        document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");

    }
});

css:

.search-bar {
    position: relative;
}

    .search-bar.active .input-text {
        max-width: 80%;
        border: 1px solid #ccc;
        background: #eee;
    }

    .icon {
        position: absolute;
        top: -2px;
        left: 0;
        padding: 13px 15px 13px 11px;
    }

        .search-icon {
            width: 50px;
            height: auto;
        }

.search-bar .input-text {
    height: 45px;
    padding: 8px 6px 8px 40px;
    max-width: 200%;
    border-radius: 25px;
    outline: none !important;
    border: 2px solid;
    width: 550px;
    transition-property: padding;
    transition-duration: 0.5s;
}

.input-text:active, .input-text:focus {
    padding: 8px 6px 8px 15px;
}

.fadeLeftSearchIcon {
    animation-name: fadeInLeft;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.fadeRightSearchIcon {
    animation-name: fadeInRight;
        animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

    @keyframes fadeInLeft {
        0% {
        opacity: 1;
        transform: translateX(0);
    }

        100% {
            opacity: 0;
            transform: translateX(-25px);
        }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-25px);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-25px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-25px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


.center {
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    top: 0;
    bottom: 0;
}

Answer 1

尝试改为-25%，查看官方site:

@keyframes fadeInLeft {
0% {
    opacity: 1;
    transform: translateX(0);
}

100% {
    opacity: 0;
    transform: translateX(-25%);
}
}

@-webkit-keyframes fadeInLeft {
0% {
    opacity: 1;
    transform: translateX(0);
}

100% {
    opacity: 0;
    transform: translateX(-25%);
}
}

结果：

如何防止动画图标从输入框中流出

How to prevent an animated icon from bleeding out from within an input box

javascript

css

animation

css-animations

asp.net-core