w66利来登录w66利来登录


利来最新登录网址

新添加的DOM节点如何实现动画效果

如何给新添加的DOM节点加动画效果

最近碰到项目中,在DOM节点中,添加新的 html 后 要有动画效果,一直没能很好地理解,尝试了各种方式,终于找出来了

简化版结构

代码如下 使用jq1.9以上版本css

.box { padding: 10px; background-color: #eee; } .dv { margin-bottom: 10px; width: 200px; height: 150px; background-color: skyblue; } .dv:nth-of-type(2n) { background-color: pink; } .btn { width: 120px; height: 34px; border-radius: 3px; background-color: blue; }

html

<div > <div ></div> </div> <div >按钮</div>

js

$(function () { const templete = `<div ></div>` $(".btn").on("click", function () { $(".box").append(templete) $(".box").find(".dv:last-of-type").slideDown(100) }) })

效果图

结果一点动画效果都没有,对其父设置都无效,很是奇怪,明明已经找到这个元素却依旧无法实现,只能想想其他方法,看看文档,终于发现,执行动画需要从无到有,而我也一直以为DOM添加的节点本来就是从无到有,实际上却是 该DOM节点设置为display: none然后变为 block,这才是真正的从无到有,所以接着就迎刃而解了

css

.none { display: none;}

js

$(function () { // 添加的 元素追加 none 默认不显示 const templete = `<div ></div>` $(".btn").on("click", function () { $(".box").append(templete) $(".box").find(".dv:last-of-type").slideDown(100) }) })

效果

总结

使用jquery时, 明明已经是 3以上的版本,使用:last-of-tyoe无法实现,而当前这个例子却可以,实在是无语动画效果本来不难,但是却没想到花费我这么长时间,一直都没想到是这个原因,终于找到了,记录一笔,避免下次再采坑, 1, 0, 9);

欢迎阅读本文章: 沈先生

利来w66官网官方下载

利来最新登录网址