Binding: Animation

The animation binding expects an object expression:

{ animationName: animationCondition }

When the animation condition expression resolved to true, the animationName function will be called. The expected function signature for an animation is as follows:

(element, scope) => Promise

Once the returned promise resolves, the animation is considered done.

The animation binding is completely compatible with the Web Animations API

Examples:

{
    closeAnimation(element) {
        return new Promise((resolve) => {
            element.doSomeCloseAnimationStuff();
        });
    },
    
    get shouldClose() { return this.isClosed && this.wasOpen; }
}

{
    closeAnimation(element) {
        const animation = element.animate(...);

        return animation.finished;
    },
    
    get shouldClose() { return this.isClosed && this.wasOpen; }
}