如何在Javascript的onclick函数中放置x和y坐标对象中的动画

Question

如何在Javascript的onclick函数上放置x和y坐标对象的动画?

 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

给框添加一个过渡。叉形演示

transition: all 0.3s;