Firefox 拒绝转换元素
Firefox refusing to transition element
为什么 firefox 拒绝转换元素?我该如何解决?
.config:before
{
content: 'test';
font: 25px/55px serif;
-webkit-transition: .6s -webkit-transform ease-in-out;
transition: .6s transform ease-in-out;
}
.config.active:before
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<span class="config active"></span>
JSBin: http://jsbin.com/zipokubode/1/edit?html,css,output
注意:我是 运行 最新的稳定 FF,所以前缀不是问题。
您需要更改伪造的布局竞赛:http://jsbin.com/xutesahiqe/1/edit?html,css,output
这里display:inline-block;
应该没问题。
.config
{
cursor: pointer;
display:inline-block;
}
.config:before
{
font: 25px/55px serif;
display:inline-block;
content: 'test';
-webkit-transition: .6s -webkit-transform ease-in-out;
transition: .6s transform ease-in-out;
}
.config.active:before
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<span class="config"></span>
为什么 firefox 拒绝转换元素?我该如何解决?
.config:before
{
content: 'test';
font: 25px/55px serif;
-webkit-transition: .6s -webkit-transform ease-in-out;
transition: .6s transform ease-in-out;
}
.config.active:before
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<span class="config active"></span>
JSBin: http://jsbin.com/zipokubode/1/edit?html,css,output
注意:我是 运行 最新的稳定 FF,所以前缀不是问题。
您需要更改伪造的布局竞赛:http://jsbin.com/xutesahiqe/1/edit?html,css,output
这里display:inline-block;
应该没问题。
.config
{
cursor: pointer;
display:inline-block;
}
.config:before
{
font: 25px/55px serif;
display:inline-block;
content: 'test';
-webkit-transition: .6s -webkit-transform ease-in-out;
transition: .6s transform ease-in-out;
}
.config.active:before
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<span class="config"></span>