无焦点时转换无法正常工作

Question

Here，过度工作在无焦点时工作正常。

但here，它不起作用。当我在元素外面点击不聚焦时，标签会立即下降而不会过度，这是我不想要的。

我对两者使用相同的代码：

transition: top .5s ease, font-size .5s ease;

Answer 1

虽然这一行是相同的（transition: top .5s ease, font-size .5s ease;），但CSS的其余部分是不同的，这就是为什么它们的工作方式不同。

例如，不起作用的样式将样式应用于通用span元素，而工作的元素则不适用。工作方式将样式应用于.user-input + .user-label, .pass-input + .pass-label { ... }，而破坏的则不适用。

考虑到一个是你想要的，另一个不是，从第一个开始使用CSS是有意义的！从一支笔到另一支笔的字面复制和粘贴：https://codepen.io/anon/pen/LJQPap

或者，通过删除影响span的CSS并添加缺少的部分来修复损坏的笔：https://codepen.io/anon/pen/PdQYXK

另外，CSS中有很多噪音，这可能是调试难的原因。将问题全部清除到最简单的问题版本会使其变得更加容易。

Answer 2

我想你没有使用这段代码

输入：焦点+标签>跨度，输入：有效+标签>跨度

{
  top: -20px; 
  font-size: 15;
}