代码之家  ›  专栏  ›  技术社区  ›  Andrew

Dojo工具包:如何在向页面添加新元素时动画化淡入?

  •  0
  • Andrew  · 技术社区  · 15 年前

    我一直在使用Dojo来完成这个任务。基本上,我试图实现的是一个Ajax特性,在这个特性中,用户向博客文章添加注释,然后立即显示出来。

    所以我到了我拥有 dojo.xhrPost 接收需要添加到注释列表中的HTML块。现在我想慢慢淡入新评论,这样效果就不会那么刺耳了。

    以下是我目前为止的情况:

    function displayNewComment(commentHtml)
    {       
        //place new comment html at the end of the list
        dojo.place(commentHtml, dojo.byId('Comments'), "last");
        //is there any way to fade this in?
    }
    
    1 回复  |  直到 15 年前
        1
  •  2
  •   PvB    15 年前

    我想你用 dojo.create 创建新节点。

    在dojo.create中,可以设置 opacity 节点的 0 所以不会出现。

    var commentHtml = dojo.create('div', { style:”opacity:0”, innerHTML: data});
    dojo.place(commentHtml, dojo.byId('Comments'), "last");
    

    或者直接

    var commentHtml = dojo.create(
        'div', 
        { style:”opacity:0”, innerHTML: data}, 
        dojo.byId('Comments'), 
        "last"
    );
    

    如果构建节点,否则只需设置 不透明度 .

    编辑

    当然也会随着

    dojo.fadeIn(commentHTML, duration, easingFunc);
    

    更多信息:

    http://api.dojotoolkit.org/jsdoc/1.4/dojo.create

    http://api.dojotoolkit.org/jsdoc/1.4/dojo.fadeIn

    http://api.dojotoolkit.org/jsdoc/1.4/dojo.style