旋转伪元素与过渡在 Safari 中不起作用答案

【问题标题】：Rotate pseudo element with transition not working in Safari旋转伪元素与过渡在 Safari 中不起作用
【发布时间】：2013-08-18 23:37:54
【问题描述】：

我在 :after 伪元素中有一个元素。点击后，它将平滑过渡。

这是我的代码笔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/ 中运行良好（单击“按类别查看”下拉菜单以查看箭头随过渡旋转。我在这里意识到他们不使用伪选择器，而是有没有办法用伪类来做到这一点？因为它在其他浏览器中工作，而不是 Safari？

此外，这需要在 :after 中，因为我给出的示例是问题的简化版本

【问题讨论】：

您链接的页面上的箭头不是伪元素。
抱歉刚刚更新了我的帖子
codepen.io/chriscoyier/pen/BkhFI 这是一个测试用例，看看浏览器是否支持伪元素动画。他们有动画吗？如果是，则有希望，如果否，则尚不支持。
感谢 Nirazul 提供，这是我害怕的，但至少我现在知道了
该死的。 Mobile Safari 是新的 IE6。这么多错误

标签： css pseudo-class

【解决方案1】：

伪元素的过渡是一种正在慢慢进入浏览器的修复方法。

我正在运行最新的 safari beta：v6.1 (8537.54.1) - 它对我来说运行良好。看来您很快就会看到修复程序了。

CSS-Tricks 有一个帖子正在随着修复的发布而更新：Transitions and Animations on CSS Generated Content

目前显示为不支持 Safari 6.0.2 及以下版本：Bug report

【讨论】：

感谢您提供这一重要信息。是的，我正在运行 Safari 6.0.5。所以看来我可以等待 6.1 或者看看是否有办法不使用 :after。再次感谢
css-tricks.com/… 看到这个问题，只要有新的 safari 版本，它就会解决这个问题。