Dojo Toolkit: How to animate a fade in while adding a new element to the page?
I am stuck with using Dojo to accomplish this. Basically what I am trying to implement is an AJAX feature where a user adds a comment to a blog post and it is immediately displayed.
So I'm to the point where I have the dojo.xhrPost
receiving a chunk of html that needs to be added to the list of comments. Now I want to slowly fade in the new comment so the effect isn't so jarring.
Here's what I've got so far:
function displayNewComment(commentHtml)
{
//place new comment html at the end of the list
dojo.place(commentHtml, dojo.b开发者_JAVA技巧yId('Comments'), "last");
//is there any way to fade this in?
}
I assume that you use dojo.create
to create the new node.
In dojo.create you can set the opacity
of the node to 0
, so it will not show up.
var commentHtml = dojo.create('div', { style:”opacity:0”, innerHTML: data});
dojo.place(commentHtml, dojo.byId('Comments'), "last");
or directly
var commentHtml = dojo.create(
'div',
{ style:”opacity:0”, innerHTML: data},
dojo.byId('Comments'),
"last"
);
If you build the node otherwise you just need to set opacity
to 0
.
EDIT
And of course fade it in with
dojo.fadeIn(commentHTML, duration, easingFunc);
Some more info:
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
精彩评论