CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
MorshedSaif
MorshedSaif

Reputation: 399

making bootstrap 4 input like material search field, transition animation issue

i was trying to make bootstrap form input like material design search field. i have managed to make it but i guess there is a small issue with focus state and that is when i click the field, the underline animation runs smooth but, when i click outside of it the animation takes two steps to play. here is the code sample to understand better (i have downloaded bootstrap locally using npm)

in html =>

<div class="container">
  <div class="d-flex mt-5">
    <i type="submit" class="fa fa-search"></i>
    <input type="email" class="form-control" placeholder="Search" />
  </div>
</div>

in scss =>

.d-flex {
    align-items: center;
}

.form-control {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    padding: 0;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid #4dd1e1;
    transition: border-color 0.2s linear;
    backface-visibility: hidden;
}

i.fa-search {
    margin-top: 0.3rem;
    margin-right: 1rem;
}

so, how can i fix this ?

Upvotes: 1

Views: 672

Answers (1)

focus.style
focus.style

Reputation: 6760

Replace transition: border-color 0.2s linear; into .form-control

.form-control {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    padding: 0;
    transition: border-color 0.2s linear; /* moved form :focus */
}

Because your animation activates only on :focus, but whithout :focus the .form-control doesn't now about animation and do the transformation harshly.

Upvotes: 1

Related Questions