gpt4 book ai didi

css - 带有过渡的旋转伪元素在 Safari 中不起作用

转载 作者:行者123 更新时间:2023-12-02 21:52:38 25 4
gpt4 key购买 nike

我在 :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 中,因为我给出的示例是问题的简化版本

最佳答案

伪元素的转换是一个正在慢慢进入浏览器的解决方案。

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

CSS-Tricks 有一篇帖子,随着修复程序的发布正在更新:Transitions and Animations on CSS Generated Content

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

关于css - 带有过渡的旋转伪元素在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18300728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com