转移焦点时过渡无法正常工作

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是有意义的！将CSS从一支笔复制并粘贴到另一支笔：https://codepen.io/anon/pen/LJQPap

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

请注意，CSS中有很多噪音，这很可能导致难以调试。将其全部清除为最简单的问题版本将使其变得更加容易。

Answer 2

我认为您没有使用这段代码

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

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