CSS3 过渡：伪元素等待到主项过渡结束后

Question

我有一个简单的问题：如果我将 css 转换附加到伪元素（：after，：before）和主项目，伪元素的动画等待主项目的动画结束。我想同时做两个动画。 我只有在 FireFox (50.0.1) 中的 Chrome (54.0.2840.99) 中才有这个问题，它的表现很好。

这个小提琴显示了问题： 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。希望对您有所帮助。

Answer 2

不要使用all，它会切分转换为2个不同的转换。使用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: "\0005B";
  margin-right: 30px;
  transition: margin 1s linear 0s;
 }

a::after {
  content: "\0005D";
  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>