javascript - 带有节点 appendChild() html 的动画

Question

我是网络开发的新手，我正在尝试创建一个网页，该网页将在单击按钮时向下延伸页面。我找到了 this link ，其中包含以下代码:

HTML:

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">Click the button to append an item to the list</p>

<button onclick="myFunction()">Try it</button>

JavaScript:

function myFunction()
{
    var node=document.createElement("LI");
    var textnode=document.createTextNode("Water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}

这将添加信息。我想这样做，所以它会动画化，而不仅仅是出现。我该怎么做？

感谢任何帮助或教程。谢谢!

Answer 1

您可以使用 Element.animate()。 有关更多信息，请阅读 this .

例子:

    const div = document.createElement('div');
    div.innerText = 'text'; 
    otherElenet.appendChild(div);
    div.animate([
        // keyframes
        { opacity: '0' },
        { opacity: '1' }
    ], {
        // timing options
        duration: 1000,
    });

Notice, It is not supported by IE