Clever Geek Handbook

Search box animation

I have created an animation in the search box. clicking on the icon opens. The problem is that when I click on "x" to close the window, it first moves to the right end and then closes. This is the link: enter code here

https://codepen.io/BeauBo/pen/YxNwpp . Can anyone help me? Thanks in advance!

+3


source to share


2 answers


It interferes with another class from "close.less" (I couldn't figure out where this css came from). If you just rename your "close" class to something like "close-form", it should work fine.



+1


source


The reason your search bar moves to the right is because when you click the close button, your form gets float: right; ...

Add the following to your form.close class in your css to fix this issue.



form.close,
form.close .bar,
form.close .bar:before,
form.close .bar:after {
    float: none;
    animation-direction: reverse;
}
+1


source






More articles:


All Articles