使div從屏幕外出現

Question

我正在做這個任務，我必須使用純javascript來使div從屏幕的側面出現，而不需要瀏覽器展開。這是我到目前爲止有：

function moveImg() { 
 

 
    var div = document.getElementsByTagName('div')[0]; 
 

 
    var pos = 500; 
 

 
    var id = setInterval(Move, 500); 
 

 
    function Move() { 
 
    if (pos <= 0) { 
 
     clearInterval(id); 
 

 
    } else { 
 
     pos++; 
 
     div.style.right = pos + 'px'; 
 
     div.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
moveImg()

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: tomato; 
 
}

<div></div>

Answer 1

什麼樣的事情是在評論說，你不要在你希望你的div移動什麼方向說，也沒有從該位置它應該開始。

我已經設置的頂部上的起始位置：100，左：100，並通過1px降低top和left值中的每個第二：

function moveImg() { 
 
    var div = document.getElementsByTagName('div')[0]; 
 
    var pos = 100; 
 
    var id = setInterval(Move, 500); 
 

 
function Move() { 
 
    if (pos <= 0) { 
 
    clearInterval(id); 
 
    } else { 
 
    pos--; 
 
    div.style.left = pos + 'px'; 
 
    div.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
moveImg()

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: tomato; 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
}

<div></div>

Answer 2

我最好使用一般的變換。

我也做了一些數學計算，我已經評論過代碼，但可以隨時詢問是否有什麼需要幫助理解。

function moveImg() { 
 
    var div = document.getElementsByTagName('div')[0]; 
 

 
    var posX = document.body.clientWidth - div.offsetWidth; // start position for X 
 
    var posY = document.body.clientHeight - div.offsetHeight; // start position for Y 
 
    var tarX = posX/2; // end position for X 
 
    var tarY = posY/2; // end position for Y 
 
    var time = 5; // how many seconds should the animation take 
 
    var fps = 60; // frames per second, heigher is smoother but requires more power 
 
    var stepX = ((posX - tarX)/(time * fps)); // how far X should move each frame 
 
    var stepY = ((posY - tarY)/(time * fps)); // how far Y should move each frame 
 

 
    var id = setInterval(Move, (1000/fps)); 
 

 
    div.style.transform = "translate(" + posX + "px, " + posY + "px)"; 
 
    div.style.opacity = "1"; 
 

 
    function Move() { 
 
    if (posX <= tarX && posY <= tarY) { 
 
     clearInterval(id); 
 
    } else { 
 
     posX -= stepX; 
 
     posY -= stepY; 
 
     div.style.transform = "translate(" + posX + "px, " + posY + "px)"; 
 
    } 
 
    } 
 
} 
 
moveImg();

body { 
 
    margin: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
div { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 15px 30px; 
 
    background: tomato; 
 
    opacity: 0; 
 
}

<div>Example!</div>