我正在做一个移动项目，我正在尝试一些东西。要开始，请查看我的简单笔，我将解释我要完成的工作。
用户几乎总是会点击搜索页面，当他们输入搜索词时，我希望input:focus启动一个过渡，缩小输入框并滑入按钮以清除文本。然后，如果用户选择，该按钮将清除任何输入的文本并保持对元素的关注。不幸的是，我用来保持焦点的 jQuery 使过渡抖动有点并且不是很实用。
这实际上只是我的第一次尝试，但我很想听听其他人在尝试使这种相同类型的效果发挥作用时的经历。欢迎提供反馈、提示和建议 :) 谢谢！
问问题
249 次
2 回答
2
输入字段失去焦点以便链接处理事件，因此该字段转换回其原始状态（阅读：奇怪的行为）。我能想出的唯一解决方案（不添加更多 JavaScript）是增加一点延迟。但老实说，如果您使用一点 JavaScript，为什么不一直使用它，因为它现在比 CSS 3 更受支持？http://codepen.io/cmegown/pen/lDqHc
于 2013-01-03T16:24:32.210 回答
0
稍加修改，我找到了一个合适的解决方案，它与我更新的原始代码片段相差不远：
http://codepen.io/cmegown/pen/lDqHc
我意识到，在初始搜索之后，用户可能会发现能够单击“清除”按钮并自动被带到一个空的搜索框并准备输入新的搜索词很有用。所以我保留了过渡并删除了重新声明原始宽度/边距值的 CSS，以避免在点击按钮时过渡“闪烁”。然后我编写了另一个 JS 片段来声明更改后的宽度/边距值，以便过渡只发生一次 - 这实际上比我的初衷更好。
它并不完美，当然也不干净 - 所以欢迎任何进一步的提示/建议！
于 2013-01-03T17:35:46.867 回答