html – CSS的CSS3转换比例导致Firefox中的跳跃子元素

概述我试图在 CSS3中扩展一个元素.此元素具有子元素,可在动画完成时跳转.这似乎只发生在Firefox中.我一直在尝试在SO上找到很多修复,但是他们似乎都没有做到这一点. 我的HTML设置： <div><ul> <li class="appcenter-menu-item focus"> <a href="#/sp"> <div class="icon"></div> 我试图在 CSS3中扩展一个元素.此元素具有子元素,可在动画完成时跳转.这似乎只发生在firefox中.我一直在尝试在SO上找到很多修复,但是他们似乎都没有做到这一点.

我的HTML设置：

<div><ul>  <li >    <a href="#/sp">      <div ></div>        <label>First item</label>    </a>  </li>  <li >    <a href="#/pep">      <div ></div>      <label>Second item</label>    </a>  </li>    <li >      <a href="#/hp">        <div ></div>        <label>Third Item</label>      </a>    </li></ul></div>

悬停过渡：

.focus {    -webkit-Transition: all 0.5s ease-in-out;    -moz-Transition: all 0.5s ease-in-out;    -o-Transition: all 0.5s ease-in-out;    -ms-Transition: all 0.5s ease-in-out;    Transition: all 0.5s ease-in-out;}.focus:hover {    -webkit-transform: translate3d(0,0);    -moz-transform: translate3d(0,0);    -o-transform: translate3d(0,0);    -ms-transform: translate3d(0,0);    transform: translate3d(0,0);    transform: scale(1.1);}

我创建了一个显示完整设置的Jsfiddle：

http://jsfiddle.net/kwhq2z4t/3/

更新

我在windows 7 x64上使用firefox版本32.0.1.

解决方法 刚刚在firefox中遇到了这个“跳转后完成”错误.

经过一番摆弄,添加-moz-transform-style：preserve-3d;到动画元素的父容器 – 将它添加到初始状态(转换发生之前的非动画状态 – 所以它只是.focus类) – 为我做了工作.

总结

以上是内存溢出为你收集整理的html – CSS的CSS3转换比例导致Firefox中的跳跃子元素全部内容，希望文章能够帮你解决html – CSS的CSS3转换比例导致Firefox中的跳跃子元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。