html - CSS3 Transition 因搜索或文本输入而异？

Question

首先，我去看了问这个问题时生成的答案。没有找到类似的东西。我只是在处理我的代码笔中的一个奇怪的怪癖。结果出乎我的意料。

最简单的解释方式就是直接链接到我的码笔。 Code Pen: CSS3 Expandable Search Form

我将相同的 CSS 代码应用于两种不同类型的输入。一个是搜索输入，另一个是文本输入。为了从每个结果中获得相似的结果，我必须修改文本输入中过渡打开的宽度并将其设置为 95% 而不是 100%。

我的目标是让每个人都使用相同的过渡代码并获得相似的过渡效果。但它不起作用。我将非常感谢任何看过它并可能帮助我的人。谢谢。顺便说一句，我是堆栈溢出和代码笔的新手。如果我做错了什么，我很抱歉。大声笑我确实尝试寻找答案。

我试过在这里发布代码，但我一定是做错了什么。不过一切都在代码笔中。

Answer 1

现在看看你的代码笔。我给每个人都分配了类(class)。

http://codepen.io/anon/pen/AlcHr

我希望你想实现这一目标。