我正在开展移动项目，我正在尝试一些事情。要开始使用，请查看my simple pen，然后我将解释我要完成的任务。
用户几乎总是会点击搜索页面，当他们输入搜索词时，我希望input:focus启动一个转换，缩小输入框并滑动按钮以清除文本。然后，如果用户选择，该按钮将清除任何输入的文本并保持对元素的关注。不幸的是，我用来保持焦点的jQuery会使转换抖动变得有点微不足道。
这实际上只是我的第一次破解，但我很想知道其他人在尝试使用同样类型的效果时所经历的事情。欢迎提供反馈，提示和建议:)谢谢！
答案 0 :(得分：2)
输入字段失去焦点以便链接处理事件，因此字段转换回其原始状态（读取：奇怪的行为）。我可以提出的唯一解决方案（不添加更多JavaScript）是添加一点延迟。但老实说，如果你使用一点JavaScript，为什么不一直走，因为它现在比CSS 3更受支持？ http://codepen.io/cmegown/pen/lDqHc
答案 1 :(得分：0)
稍微修补一下，我找到了一个合适的解决方案，它不会偏离我更新的原始片段：
http://codepen.io/cmegown/pen/lDqHc
我意识到在初始搜索之后，用户可能会发现能够点击清除＆＃39;按钮并自动进入空搜索框并准备输入新的搜索词。所以我保留了过渡并删除了CSS重新声明原始的宽度/边距值，以避免过渡＆＃34;闪烁＆＃34;点击按钮时。然后我写了另一个JS片段来声明更改的宽度/边距值，这样转换只发生一次 - 这实际上比我原来的意图更好。
它并不完美，而且它肯定不干净 - 所以欢迎任何进一步的提示/建议！