html - :after pseudoelements wait to main item transition end 的 CSS3 过渡

Question

我有一个简单的问题:如果我将 css 过渡附加到伪元素(:之后，:之前)和主要元素，伪元素的动画等待主要元素的动画结束。我想同时做两个动画。 我只在 FireFox (50.0.1) 的 Chrome (54.0.2840.99) 中遇到这个问题，它表现良好。

这个 fiddle 显示了问题: 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: "\0005B";
  margin-right: 30px;
  transition: all 1s linear 0s;
 }

a::after {
  content: "\0005D";
  margin-left: 30px;
  transition: all 1s linear 0s;
}

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

Answer 1

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

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: "\0005B";
  margin-right: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
 }

a::after {
  content: "\0005D";
  margin-left: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
}

我有updated your js.fiddle here .希望对您有所帮助。