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轉換：僞元素等待到主項轉換結束後

回答

相關問題