1

在 Android webkit 浏览器 (4.x) 中触发操作时，我遇到了停止关键帧转换的问题。

假设我们有这个 CSS（使红色框无限旋转）：

#test
{
    width:150px;
    height:150px;
    background:red;
    position:absolute;
    -webkit-transform: translate3d(48px,95px,0px);
    top:0px;
    left:0px;
    -webkit-animation-name: mymove;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes mymove 
{
    0%   { -webkit-transform: translate3d( 48px, 95px, 0px ) rotate( 0deg ) ;}
    100% { -webkit-transform: translate3d( 48px, 95px, 0px ) rotate( 360deg ) ;}
}

在 HTML 中，我有 id 为“test”的 div，并且 onTouchStart 操作试图使用 JS 停止旋转（没有运气）

this.style.webkitAnimationPlayState = 'paused'

-webkit-transform: translate3d( 48px, 95px, 0px ); 如果用这个改变这个问题就解决了-webkit-transform: translate( 48px, 95px ); 虽然，我需要 3D 变换。否则，由于我创建了许多对象，我会遇到许多性能问题。

提前致谢

4

0 回答 0