MdlAnimation class

MdlAnimation simplifies the use of CSS3 animations.

This builds and injects a rule into the stylesheets that defines the keyframes of the animation. This rule can then be applied to an element.

ATTENTION: Be aware that the rules are not deleted when an instance is destroyed, therefore generating instances continuously is probably a bad idea.

Usage: // Good place for this is outside of main final MdlAnimation bounceInRight = new MdlAnimation.fromStock(StockAnimation.BounceInRight);

 class Application {
     ...
     _bindSignals() {
         ...
        final MaterialButton properties = MaterialButton.widget(dom.querySelector("#showprops"));
        properties.onClick.listen( (final dom.Event event) async {
           event.preventDefault();

           final dom.Element body = dom.querySelector("body");
           body.classes.toggle("show-properties");

           if(body.classes.contains("show-properties")) {
              bounceInRight(dom.querySelector(".properties"), onComplete: () => _logger.info("Animation completed!"));
           }
         });
       }
    }

Constructors

MdlAnimation(String property, Object from, Object to)
Simple constructor defining the animation of a single CSS property. [...]
MdlAnimation.fromStock(StockAnimation _stockanimation)
Returns an instance that defines the animation of some predefined StockAnimations [...]
MdlAnimation.keyframes(Map<int, Map<String, Object>> keyframes, { ShadowRoot shadow: null })
Returns an instance that defines each keyframe of the animation. [...]
MdlAnimation.properties(Map<String, Object> from, Map<String, Object> to, { ShadowRoot shadow: null })
Returns an instance that defines the animation of multiple CSS properties. [...]

Properties

hashCode int
The hash code for this object. [...]
read-only, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

apply(Element element, { Duration duration: const Duration(seconds: 1), Duration delay: const Duration(), int iterations: 1, bool alternate: false, bool persist: false, AnimationTiming timing: AnimationTiming.EASE, ShadowRoot shadow: null }) Future
Apply this animation to an element. [...]
call(Element element, { Duration duration: const Duration(seconds: 1), Duration delay: const Duration(), int iterations: 1, bool alternate: false, bool persist: false, AnimationTiming timing: AnimationTiming.EASE, ShadowRoot shadow: null }) Future
Make the function-call even shorter! Mainly this is a shortcut to apply [...]
destroy() → void
Removes the rule from the stylesheets. [...]
modify(int keyframe, String property, Object value) bool
Modifies a single property for a specific keyframe. [...]
replace(int keyframe, Map<String, Object> properties) bool
Replaces a set of properties for a specific keyframe. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() String
Returns a string representation of this object.
inherited

Operators

operator ==(dynamic other) bool
The equality operator. [...]
inherited