搜索框动画

Question

我创建了一个搜索框动画。当点击图标时，它会打开。问题是当我点击“x”关闭盒子时，它先移动到右端然后关闭。这是链接：enter code here https://codepen.io/BeauBo/pen/YxNwpp。 有谁可以帮我这个？提前谢谢！

Answer 1

它干扰了另一个类“close.less”（我无法弄清楚这个css来自哪里）。如果你只是将你的“关闭”类重命名为“close-form”，它应该可以正常工作。

Answer 2

您的搜索栏向右移动的原因是因为您的表单在按下关闭按钮时获得 float：right; 。

将以下内容添加到css中的form.close类中以解决此问题。

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