Question

我有一个简单的问题：如果我将css过渡附加到pseudoelement（：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>

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

2 个答案: