我希望创建一个动画,每按一次按钮,对象就会向右移动一定数量。
例如,如果对象的初始位置是"左:10px"并且每1个动画循环将其移动10px,然后在第一次单击后它应该是20px,在第二次单击后它应该是30px,依此类推。
现在我的代码:
的JavaScript
document.getElementById( 'move-me' ).addEventListener( 'click', function () {
var move = document.getElementById( 'move' );
move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );
HTML
<button id="move-me">Move</button>
<div id="move"></div>
CSS
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
transition: left 250ms ease-in-out;
-moz-transition: left 250ms ease-in-out;
-ms-transition: left 250ms ease-in-out;
-o-transition: left 250ms ease-in-out;
-webkit-transition: left 250ms ease-in-out;
width: 50px;
}
此代码使用CSS3过渡,但它没有在我的Android设备上使用-webkit-transform硬件加速。我该如何解决这个问题?
答案 0 :(得分:0)
选择不在-webkit-transform
和-webkit-transition
之间,而是在left
和-webkit-transform
之间。
以下是如何使用3d加速:
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
-moz-transition: -moz-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;
width: 50px;
}
使用Javascript:
document.getElementById( 'move' ).addEventListener( 'click', function() {
var move = document.getElementById( 'move' );
var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
move.style.webkitTransform = transform;
move.style.mozTransform = transform;
move.style.msTransform = transform;
move.style.oTransform = transform;
move.style.transform = transform;
}, false );
答案 1 :(得分:0)
您也可以使用translateX。这绝对是硬件加速。
targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)
这会将div向右移动100%,但仅在硬件加速设备中很好且平滑。