Effects (dojo.lfx) changes
The dojo.Animation module and some basic effects have been moved to dojo base so that they will always be available. The base code includes the following code from dojo.lfx:
- dojo.fadeIn()
- dojo.fadeOut()
- dojo.animateProperty - formerly dojo.lfx.propertyAnimation()
as well as the associated Animation and Line objects, which are now private.
All dojo.fx functions use a single object as a parameter, using dojo.mixin to find appropriate information. for example:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.geshifilter {font-family: monospace;}
.geshifilter .imp {font-weight: bold; color: red;}
.geshifilter .kw1 {color: #000066; font-weight: bold;}
.geshifilter .kw2 {color: #003366; font-weight: bold;}
.geshifilter .kw3 {color: #000066;}
.geshifilter .co1 {color: #009900; font-style: italic;}
.geshifilter .coMULTI {color: #009900; font-style: italic;}
.geshifilter .es0 {color: #000099; font-weight: bold;}
.geshifilter .br0 {color: #66cc66;}
.geshifilter .st0 {color: #3366CC;}
.geshifilter .nu0 {color: #CC0000;}
.geshifilter .me1 {color: #006600;}
.geshifilter .re0 {color: #0066FF;}
var args = {
node: 'pane', // always required
duration: 1000 // always required
properties: { // core of _Animation
opacity: {
start:0.2,
end:0.75
}
}
}; dojo.animateProperty(args).play(); // play it
Callbacks can be defined either via dojo.connect or as a property of the Animation:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.geshifilter {font-family: monospace;}
.geshifilter .imp {font-weight: bold; color: red;}
.geshifilter .kw1 {color: #000066; font-weight: bold;}
.geshifilter .kw2 {color: #003366; font-weight: bold;}
.geshifilter .kw3 {color: #000066;}
.geshifilter .co1 {color: #009900; font-style: italic;}
.geshifilter .coMULTI {color: #009900; font-style: italic;}
.geshifilter .es0 {color: #000099; font-weight: bold;}
.geshifilter .br0 {color: #66cc66;}
.geshifilter .st0 {color: #3366CC;}
.geshifilter .nu0 {color: #CC0000;}
.geshifilter .me1 {color: #006600;}
.geshifilter .re0 {color: #0066FF;}
var foo = dojo.fadeOut({ node: node, duration:400,
onEnd: function(){ alert('finished playing!'); },
beforeBegin: function(){ alert('starting.'); }
}).play();
// or
var foo = dojo.fadeOut({node: node, duration:400 });
dojo.connect(foo,"onEnd",function(){ alert('finished playing!'); });
dojo.connect(foo,"beforeBegin",function(){ alert('starting.'); });
foo.play();
dojo.lfx.Chain/dojo.lfx.chain and dojo.lfx.Combine/dojo.lfx.combine have been replaced by dojo.fx.chain() and dojo.fx.combine() methods.
Other dojo.lfx code is being ported to the new Dojo core and will be renamed to simply dojo.fx. So far, this includes dojo.fx.wipeIn/Out methods and dojo.fx.slideTo.
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.geshifilter {font-family: monospace;}
.geshifilter .imp {font-weight: bold; color: red;}
.geshifilter .kw1 {color: #000066; font-weight: bold;}
.geshifilter .kw2 {color: #003366; font-weight: bold;}
.geshifilter .kw3 {color: #000066;}
.geshifilter .co1 {color: #009900; font-style: italic;}
.geshifilter .coMULTI {color: #009900; font-style: italic;}
.geshifilter .es0 {color: #000099; font-weight: bold;}
.geshifilter .br0 {color: #66cc66;}
.geshifilter .st0 {color: #3366CC;}
.geshifilter .nu0 {color: #CC0000;}
.geshifilter .me1 {color: #006600;}
.geshifilter .re0 {color: #0066FF;}
var foo = dojo.fx.slideTo({ node: node, top:'500', left:'200', duration: 1000 }).play();
var wipeIt = dojo.fx.wipeOut({ node: node, duration:1000 }).play();
A Basic Toggle class exists in dojo.fx.Toggler, defaulting to fadeOut for .hide() and wipeIn for .show():
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.geshifilter {font-family: monospace;}
.geshifilter .imp {font-weight: bold; color: red;}
.geshifilter .kw1 {color: #000066; font-weight: bold;}
.geshifilter .kw2 {color: #003366; font-weight: bold;}
.geshifilter .kw3 {color: #000066;}
.geshifilter .co1 {color: #009900; font-style: italic;}
.geshifilter .coMULTI {color: #009900; font-style: italic;}
.geshifilter .es0 {color: #000099; font-weight: bold;}
.geshifilter .br0 {color: #66cc66;}
.geshifilter .st0 {color: #3366CC;}
.geshifilter .nu0 {color: #CC0000;}
.geshifilter .me1 {color: #006600;}
.geshifilter .re0 {color: #0066FF;}
var t = new dojo.fx.Toggler({ node: node,
showDuration: 500, hideDuration:300
}); t.show(); /* time passes */ t.hide();
Other esoteric animations can be found in dojox.fx ... This includes:
- dojox.fx.sizeTo - size a node about it's center, animated
- dojox.fx.easing - a few additional easing functions to affect how an animation Line is calculated
- dojox.fx.addClass/removeClass/toggleClass - experimental CSS animation code. animates the effects of add/remove/toggle'ing a class on a node