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

我建议您使用bootstrap collapse。

Answer 2

你需要阅读一些关于jQuery的内容，但是这里有你想要的描述：jQuery using append with effects

原则是首先创建一个jQuery对象，它代表你想要追加的元素，确保它有一个样式设置，确保它不会立即可见（例如display: none）。

然后将元素追加到页面中（此时浏览器不会因样式设置而渲染它），最后使用jQuery方法将其设置为视图中的动画。

Answer 3

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

// controlling the opacity of an element
document.getElementById(yourElementId).style.opacity = 0.5;
// controlling the position(top) of an element
document.getElementById(yourElementId).style.top = 10;

您想为您想要做的任何动画创建一组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);
}

（尚未彻底测试，因此可能不稳定）

我的例子是淡入淡出，但对任何类型的位置变化或颜色变化或其他任何事情都做同样的事情。

Answer 4

您可以使用 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,
    });

注意，IE不支持

节点appendChild（）html的动画

4 个答案: