CSS3 的转换 :在伪元素等待主项转换结束之后

Question

我有一个简单的问题：如果我将 css 过渡附加到伪元素(：之后，：之前)和主项目，伪元素的动画等待主项的动画结束。我想同时做两个动画。 我仅在 Chrome (54.0.2840.99) 中的 FireFox (50.0.1) 中遇到此问题，它的行为正常。

这个小提琴显示了问题： https://jsfiddle.net/CptCrunch/wtse7e8b/1

body {
text-align: center;
}
a {
font-size: 50px;
font-weight: 800;
color: red;
text-decoration: none;
transition: all 1s linear 0s;
}
a:hover {
color: blue;
}
a::before {
content: "005B";
margin-right: 30px;
transition: all 1s linear 0s;
}
a::after {
content: "005D";
margin-left: 30px;
transition: all 1s linear 0s;
}

有什么办法可以解决这个问题吗？感谢您的帮助。

Answer 1

如果您为每个元素设置特定的transition值(而不是使用all)，它的行为似乎与您在 Chrome 中的预期一样。我测试了火狐，它在那里仍然可以正常工作。

a {
font-size: 50px;
font-weight: 800;
color: red;
text-decoration: none;
transition: color 1s linear 0s; /*set color only*/
}
a:hover {
color: blue;
}
a::before {
content: "005B";
margin-right: 30px;
transition: margin 1s linear 0s; /*set margin only*/
}
a::after {
content: "005D";
margin-left: 30px;
transition: margin 1s linear 0s; /*set margin only*/
}

我已经在这里更新了你的js.fiddle。希望有帮助。

Answer 2

不要在将过渡转换为 2 个不同转换的地方使用all。 将color用于锚点，margin用于伪元素

body {
text-align: center;
}
a {
font-size: 50px;
font-weight: 800;
color: red;
text-decoration: none;
transition: color 1s linear 0s;
}
a:hover {
color: blue;
}
a::before {
content: "005B";
margin-right: 30px;
transition: margin 1s linear 0s;
}
a::after {
content: "005D";
margin-left: 30px;
transition: margin 1s linear 0s;
}
a:hover::before {
margin-right: 2px;
}
a:hover::after {
margin-left: 2px;
}

<a href="#">Hello world!</a>