Location: A review of cardiac cellular electrophysiology models @ c47db6b2fedb / dojo-presentation / js / dojo / dojox / fx / tests / test_animateClass.html

Author:
David Nickerson <david.nickerson@gmail.com>
Date:
2021-09-17 15:39:51+12:00
Desc:
tweak html formatting
Permanent Source URI:
https://models.fieldml.org/workspace/a1/rawfile/c47db6b2fedb368422c7f4d5191aeb9f319ad684/dojo-presentation/js/dojo/dojox/fx/tests/test_animateClass.html
Compare... Download Source

dojox.fx.style tests

dojox.fx.style provides a few methods to animate the changes that would occur when adding or removing a class from a domNode.

  • dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation
  • dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation
  • dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)
spacing test line-height test font-size test

testing sizes

add .tall remove .tall add .wide remove .wide toggle .tiny

testing position

This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar will take precedent. the below position test shows the results of this:

.offsetSome .topLeft .bottomRight
toggle .green toggle .black toggle .blue

Some properties cannot be modified (fontFace, and so on), so to ensure the results at the end of the animation are applied correctly and fully, the class name is set on the node via dojo.add/removeClass().