javascript - JavaScript 中的动画 insertBefore

Question

所以我有这个应用程序来检查服务器上的更新以获得 JSON 响应，每个新更新都放在我的列表顶部的新 div 上，该新 div 是使用 javascript 通过 insertBefore 添加的。

一切都很好，但我想在添加 div 时添加动画效果，即“缓慢”向下移动现有的 div，并在顶部添加新的 div，有关如何执行此操作的任何指示？

该应用程序实际上在 facebook 中运行，不使用 iframe，我尝试使用 jquery 但它似乎在 facebook 上不起作用，并且查看 FB 所做的代码修改，我认为其他框架也会有类似的问题。

Answer 1

由于您想要自己完成，因此您需要使用 setTimeout 来重复更改 div 的高度。基本的、快速的、肮脏的代码看起来像这样:

var newDiv; 

function insertNewDiv() {
// This is called when you realize something was updated    
// ...      
    newDiv = document.createElement('div');
    newDiv.style.height = "0px";
    document.body.appendChild(newDiv); 
    setTimeout(slideInDiv, 0);
}

function slideInDiv(){  
    newDiv.style.height = newDiv.clientHeight + 10 + "px";  // Slowly make it bigger

    if (newDiv.clientHeight < 100){
        setTimeout(slideInDiv, 40);  // 40ms is approx 25 fps
    } else {
        addContent();
    }
}


function addContent(){  
  newDiv.innerHTML = "Done!";
}

请注意，您可能希望使动画代码更加通用(传入 ID、回调函数等)，但对于基本动画来说，这应该可以帮助您入门。