在轉換中無法在Safari中運行的僞元素

我在：僞元素之後有一個元素。點擊後，它將以平穩過渡旋轉。在轉換中無法在Safari中運行的僞元素

這是我的代碼筆http://codepen.io/maxwbailey/pen/ABgJq - 這適用於Mac上的Chrome，Firefox和Opera，但不適用於Safari。

我的代碼...

HTML

<div class="expand"></div>

CSS

.expand:after { 
    content:""; 
    display:block; 
    width:200px; 
    height:200px; 
    background-color:red; 
    cursor:pointer; 
    -webkit-transition: -webkit-transform 1s ease; 
    -moz-transition: -moz-transform 1s ease; 
    transition: transform 1s ease; 
} 

.expanded:after { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
}

jQuery的

$('.expand').click(function(e) { 
    $(this).toggleClass('expanded'); 
});

想知道我在做什麼錯。

我在這個網站上看到過，它在Safari中工作正常http://www.barrelny.com/blog/（點擊'按類別查看'下拉菜單，看到帶有過渡的箭頭旋轉我在這裏意識到它們不使用僞選擇器，但是在那裏與僞類的方式做它，因爲它工作在其他瀏覽器只是沒有野生動物園

此外，這需要在一個：？？後作爲例子，我已經給是問題的一個簡化版本

來源

2013-08-18 Adam

你鏈接的頁面是箭頭沒有僞元素。 – nirazul

對不起剛更新了我的文章 – Adam

http://codepen.io/chriscoyier/pen/BkhFI 這是一個測試用例，看看瀏覽器是否支持僞元素的動畫。他們動畫？如果是的話，有希望，如果沒有，那麼它還不被支持。 – nirazul

僞元素的過渡是一種正在緩慢進入瀏覽器的修復方式。

我正在運行la測試safari beta：v6.1（8537.54.1） - 它對我來說工作得很好。看起來你會很快看到修復的土地。

CSS-技巧有被更新修復的土地後：Transitions and Animations on CSS Generated Content

它目前顯示爲Safari瀏覽器6.0.2上下爲不受支持：Bug report

來源

2013-08-18 15:37:54 dc5

感謝您的關鍵信息。是的，我正在運行Safari 6.0.5。所以看起來我可以等待6.1或者看看是否有一種方法可以不使用：after。再次感謝 – Adam

http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/看到它的修復，當有新的safari版本出現時就會解決這個問題。 – PRAH

在轉換中無法在Safari中運行的僞元素

回答

相關問題