Javascript 带有节点appendChild（）html的动画

我对web开发非常陌生，我正在尝试创建一个网页，当点击按钮时，它将向下延伸到页面。我发现，其中包含以下代码：

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>

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

这将添加信息。我想这样做，使它在动画中，而不仅仅是出现。我该怎么办

---

感谢您的帮助或指导。谢谢大家!

我建议您使用。

您需要仔细阅读一下jQuery，但这里有一个关于您想要什么的描述：

原则是首先创建一个jQuery对象，该对象表示要附加的元素，确保它具有一个样式设置，以确保它不会立即可见（例如，

display:none

）

---

然后将元素附加到页面中（此时浏览器由于样式设置而不会呈现该元素），最后使用jQuery方法将其动画化到视图中。

最常用的方法是通过javascript控制CSS样式，例如（这些只是示例）：

您希望为您想要执行的任何动画创建一组javascript，并将该代码放入单击时调用的函数中。 淡入效果的示例可以是：

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

// fade-in effect. The opacity starts from zero, and increases through 10steps.
node.style.opacity = 0;
for (var i=1;i<=10;i++) {
    node.style.opacity = i/10;
}
node.style.opacity = 1;
// end of fade-in effect

node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}

函数myFunction（）
{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“水”）；
//淡入效果。不透明度从零开始，增加10步。
node.style.opacity=0；
对于（var i=1；i，可以使用元素.animate（）。
欲了解更多信息，请阅读

例如：

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

注意，IE不支持它

你是在寻找一个纯javascript解决方案，还是愿意使用jQuery？我对使用jQuery没问题，但正如我所说，我对它太陌生了，你必须帮助将它合并到代码中，哈哈。实际上，使用像jQuery这样的库更好，但我只是假设你只想使用简单的javascript而不想使用其他东西。
    const div = document.createElement('div');
    div.innerText = 'text'; 
    otherElenet.appendChild(div);
    div.animate([
        // keyframes
        { opacity: '0' },
        { opacity: '1' }
    ], {
        // timing options
        duration: 1000,
    });