旋转伪元素,转换在Safari中不起作用

Question

我有一个元素: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？

此外,这需要在:之后,我给出的示例是问题的简化版本

Answer 1

转换伪元素是一种慢慢进入浏览器的修复方法.

我正在运行最新的safari beta:v6.1(8537.54.1) - 它对我来说很好用.看起来你很快就会看到修复土地.

CSS-Tricks有一个帖子,正在修复版本:CSS生成内容的过渡和动画

它目前显示为不支持Safari 6.0.2及更低版本:错误报告