带有节点appendChild（）html的动画 [英] animation with node appendChild() html

问题描述

我对Web开发非常陌生，我正在尝试创建一个网页，该网页将在单击按钮时向下扩展。我找到了此链接，其中包含以下代码：

I'm very very new to web development, and I'm trying to create a webpage that will extend down the page as a button is clicked. I found this link, which contains this code:

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);
}

将添加信息。我想这样做，以便动画显示，而不仅仅是出现。我将如何处理？

Which will add information. I want to do this so it animates in, not just appears. How would I go about this?

任何帮助或教程都值得赞赏。谢谢！

Any help or tutorials are appreciated. Thank you!

推荐答案

您必须在jQuery上学一点点，但是这里有您想要的内容的描述：使用附加效果的jQuery

You would have to read up a bit on jQuery, but there's a description of pretty much what you want here: jQuery using append with effects

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

The principle is to create a jQuery object first, that represents the element you want to append, making sure that it has a style setting that ensures that it is not immediately visible (e.g. display: none).

然后将元素添加到页面中（此时，由于样式设置，浏览器将无法呈现它），并且最后使用jQuery方法使其动画可见。

You then append the element into the page (at which point the browser won't render it due to the style setting), and finally use a jQuery method to have it animate into view.

这篇关于带有节点appendChild（）html的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！