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

【问题标题】：How to put an animation in x and y coordinates object on the onclick function in Javascript?如何在 Javascript 的 onclick 函数上的 x 和 y 坐标对象中放置动画？
【发布时间】：2015-11-25 18:25:21
【问题描述】：

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

 http://codepen.io/plas05/pen/OVeeLv

【问题讨论】：

css3 动画，但我只需要 javascript

标签： javascript dom-events prototype mouse

【解决方案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/

【讨论】：

【解决方案2】：

只需在框中添加一个过渡。 Forked demo

transition: all 0.3s;

【讨论】：

我以前用过，但我的问题是你在动画到目的地时看不到 x 和 y 像素的增量。无需使用 css3 动画
您的问题令人困惑。这是你想要的吗？ jsbin.com/pavuk/edit?html,js,output