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;

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

2 个答案: