如何在javascript中的onclick函數中將動畫放在x和y座標對象上？

Question

如何在javascript中的onclick函數中的x和y座標對象的動畫？

enter code here http://codepen.io/plas05/pen/OVeeLv 

Answer 1

你好的人這裏是一個解決方案：https://jsfiddle.net/leojavier/4f5z3c62/ 使用CSS動畫代替，因爲GPU需要你的CSS動畫的照顧，是不太可能有閃爍......是服務表現更好......

function CreateDiv(elm, id, bgcolor, w, h) { 
    var elm = document.createElement(elm); 
    elm.id = id; 
    elm.style.backgroundColor = bgcolor; 
    elm.style.width = w; 
    elm.style.height = h; 
    this.postXY = function(pos, posX, posY) { 
    elm.style.position = pos; 
    elm.style.left = posX; 
    elm.style.top = posY; 
    }; 
    document.getElementsByTagName('body')[0].appendChild(elm); 
}; 

var b1 = new CreateDiv('div', 'box', '#999', '50px', '50px'), 
bx = document.getElementById("box"), 
bt = document.body.offsetHeight/2 +"px", 
bl = document.body.offsetWidth/2 +"px"; 

b1.postXY('absolute', bl, bt); 

this.onclick= function(e) { 
    Move(e); 
}; 

function Move(evt) { 
    console.log(evt.target) 
    evt.target.className = "move" 
}; 

CSS

#box { 
    display:block; 
    font-size:12px; 
    line-height:19px; 
    cursor:pointer; 
} 

.move { 
    -moz-animation: animation 0.4s; 
    -o-animation: animation 0.4s; 
    -webkit-animation: animation 0.4s; 
    animation: animation 0.4s; 
    -moz-animation-timing-function: ease-out; 
    -o-animation-timing-function: ease-out; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -moz-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@keyframes animation { 
    from { 
     -moz-transform: translateX(0); 
     -ms-transform: translateX(0); 
     -o-transform: translateX(0); 
     -webkit-transform: translateX(0); 
     transform: translateX(0); 
    } 

    to { 
     -moz-transform: translateX(-250px); 
     -ms-transform: translateX(-250px); 
     -o-transform: translateX(-250px); 
     -webkit-transform: translateX(-250px); 
     transform: translateX(-250px); 
    } 
} 

@-moz-keyframes animation { 
    from { 
     -moz-transform: translateX(0); 
     -ms-transform: translateX(0); 
     -o-transform: translateX(0); 
     -webkit-transform: translateX(0); 
     transform: translateX(0); 
    } 

    to { 
     -moz-transform: translateX(-250px); 
     -ms-transform: translateX(-250px); 
     -o-transform: translateX(-250px); 
     -webkit-transform: translateX(-250px); 
     transform: translateX(-250px); 
    } 
} 

@-webkit-keyframes animation { 
    from { 
     -moz-transform: translateX(0); 
     -ms-transform: translateX(0); 
     -o-transform: translateX(0); 
     -webkit-transform: translateX(0); 
     transform: translateX(0); 
    } 

    to { 
     -moz-transform: translateX(-250px); 
     -ms-transform: translateX(-250px); 
     -o-transform: translateX(-250px); 
     -webkit-transform: translateX(-250px); 
     transform: translateX(-250px); 
    } 
} 

https://jsfiddle.net/leojavier/4f5z3c62/

Answer 2

只需在框中添加一個轉換即可。 Forked demo

transition: all 0.3s;