html - 失焦时过渡无法正常工作

Question

在这里，散焦时过渡效果很好。

但在这里，它不起作用。当我在元素外部单击以取消焦点时，标签将立即下降而没有过渡，这是我不想要的。

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

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

标签： htmlcss

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 中有很多噪音，这可能是难以调试的原因。将其全部清理为问题的最简单版本会使问题变得容易得多。