objstylewidth=400px时，就会有过渡段，出现过渡动画，出现痕迹。
当元素本身为display，none时，若此时我们想通过js先将其变为display：block并且随后再触发其他想要的transition过渡效果，需要在js改变其为display：block后延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。
<!DOCTYPE html><html>
<head>
<meta charset=UTF-8>
<title>Yugi</title>
<style>
*{
margin:0
padding:0
}
</style>
<script>
var Yugi = function(w, h, v)
{
this.w = w
this.h = h
this.v = v
}
Yugi.prototype = new Yugi
Yugi.prototype.constructor = Yugi
Yugi.pointToPoint = function(a, b) {
return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2))
}
Yugi.pointToAngle = function(origin, point) {
var PI = Math.PI
if (point[0] == origin[0]) {
if (point[1] > origin[1])
return PI * 0.5
return PI * 1.5
} else if (point[1] == origin[1]) {
if (point[0] > origin[0])
return 0
return PI
}
var t = Math.atan((origin[1] - point[1]) / (origin[0] - point[0]) * 1)
if (point[0] > origin[0] && point[1] < origin[1])
return t + 2 * PI
if (point[0] > origin[0] && point[1] > origin[1])
return t
return t + PI
}
Yugi.prototype.create = function(e, _sX, _sY)
{
var div = document.createElement("div")
div.style.position = "absolute"
div.style.cursor = "pointer"
div.style.width = this.w + "px"
div.style.height = this.h + "px"
var L = e.clientX + _sX - this.w / 2, T = e.clientY + _sY - this.h / 2
div.style.left = L + "px"
div.style.top = T + "px"
div.style.backgroundColor = "red"
document.body.appendChild(div)
this.elem = div
this.currPoint = [L, T]
}
Yugi.prototype.move = function(e, _sX, _sY)
{
var me = this, x = e.clientX + _sX - me.w / 2, y = e.clientY + _sY - me.h / 2
var newPoint = [x, y]
var sleep = 20, speed = me.v / sleep
me.interval && clearInterval(me.interval)
me.interval = setInterval(function() {
var len = Yugi.pointToPoint(me.currPoint, newPoint)
if (len < 1) {
clearInterval(me.interval)
me.interval = 0
} else {
var angle = Yugi.pointToAngle(me.currPoint, newPoint)
me.currPoint = [me.currPoint[0] + Math.cos(angle) * Math.min(len / 2, speed), me.currPoint[1] + Math.sin(angle) * Math.min(len / 2, speed)]
me.elem.style.left = me.currPoint[0] + 'px'
me.elem.style.top = me.currPoint[1] + 'px'
}
}, sleep)
}
var yugi = new Yugi(30, 30, 500)
document.onclick = function(e)
{
e = e || window.event
var _sX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
var _sY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var me = yugi
if (!me.elem) {
me.create(e, _sX, _sY)
}
else {
if (!me.interval) {
var cloned = document.createElement("div")
cloned.innerHTML = me.elem.outerHTML
document.body.appendChild(cloned.children[0])
}
me.move(e, _sX, _sY)
}
}
document.oncontextmenu = new Function("return false")
</script>
</head>
<body></body>
</html>
