CSS3转换：伪元素等待到主项转换结束后

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

这捣鼓出了问题： 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; 
}

有什么办法解决这一问题？感谢帮助。

来源

2016-11-29 nbsp

看起来如果您为每个元素设置了具体的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。希望有所帮助。

来源

2016-11-29 19:50:57 crazymatt

谢谢，解决问题。解决了！ – nbsp

请勿使用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>

来源

2016-11-29 20:04:36 jafarbtech

CSS3转换：伪元素等待到主项转换结束后

回答

相关问题