feat(visual): move animation from view slot to visual

scripts/vendor-bundle.js

@@ -2145,4 +2145,4 @@ var requirejs, require, define;
 }(this, (typeof setTimeout === 'undefined' ? undefined : setTimeout)));
 
 _aureliaConfigureModuleLoader();
-function _aureliaConfigureModuleLoader(){requirejs.config({"baseUrl":"src/","paths":{"root":"src","resources":"resources","elements":"resources/elements","attributes":"resources/attributes","valueConverters":"resources/value-converters","bindingBehaviors":"resources/binding-behaviors","app-bundle":"../scripts/app-bundle"},"packages":[],"stubModules":["text"],"shim":{},"bundles":{"app-bundle":["app-config","app","environment","generated-configuration","main","name-tag-config","name-tag","debug/configuration","debug/reporter","debug/task-queue","runtime/aurelia","runtime/decorators","runtime/di","runtime/interfaces","runtime/pal","runtime/reporter","runtime/task-queue","debug/binding/binding-context","debug/binding/unparser","jit/binding/expression","runtime/configuration/standard","runtime/binding/array-change-records","runtime/binding/array-observation","runtime/binding/ast","runtime/binding/binding-context","runtime/binding/binding-mode","runtime/binding/binding","runtime/binding/call","runtime/binding/checked-observer","runtime/binding/class-observer","runtime/binding/collection-observation","runtime/binding/connect-queue","runtime/binding/connectable-binding","runtime/binding/dirty-checker","runtime/binding/element-observation","runtime/binding/event-manager","runtime/binding/expression","runtime/binding/listener","runtime/binding/map-change-records","runtime/binding/map-observation","runtime/binding/observation","runtime/binding/observer-locator","runtime/binding/property-observation","runtime/binding/ref","runtime/binding/select-value-observer","runtime/binding/set-observation","runtime/binding/signal","runtime/binding/subscriber-collection","runtime/binding/svg-analyzer","runtime/resources/else","runtime/resources/if-core","runtime/resources/if","runtime/templating/animator","runtime/templating/component","runtime/templating/lifecycle","runtime/templating/shadow-dom","runtime/templating/view-engine","runtime/templating/view-slot","runtime/templating/view","svg/binding/svg-analyzer"]}})}
+function _aureliaConfigureModuleLoader(){requirejs.config({"baseUrl":"src/","paths":{"root":"src","resources":"resources","elements":"resources/elements","attributes":"resources/attributes","valueConverters":"resources/value-converters","bindingBehaviors":"resources/binding-behaviors","app-bundle":"../scripts/app-bundle"},"packages":[],"stubModules":["text"],"shim":{},"bundles":{"app-bundle":["app-config","app","environment","generated-configuration","main","name-tag-config","name-tag","debug/configuration","debug/reporter","debug/task-queue","runtime/aurelia","runtime/decorators","runtime/di","runtime/interfaces","runtime/pal","runtime/reporter","runtime/task-queue","debug/binding/binding-context","debug/binding/unparser","jit/binding/expression","runtime/binding/array-change-records","runtime/binding/array-observation","runtime/binding/ast","runtime/binding/binding-context","runtime/binding/binding-mode","runtime/binding/binding","runtime/binding/call","runtime/binding/checked-observer","runtime/binding/class-observer","runtime/binding/collection-observation","runtime/binding/connect-queue","runtime/binding/connectable-binding","runtime/binding/dirty-checker","runtime/binding/element-observation","runtime/binding/event-manager","runtime/binding/expression","runtime/binding/listener","runtime/binding/map-change-records","runtime/binding/map-observation","runtime/binding/observation","runtime/binding/observer-locator","runtime/binding/property-observation","runtime/binding/ref","runtime/binding/select-value-observer","runtime/binding/set-observation","runtime/binding/signal","runtime/binding/subscriber-collection","runtime/binding/svg-analyzer","runtime/configuration/standard","runtime/resources/else","runtime/resources/if-core","runtime/resources/if","runtime/templating/animator","runtime/templating/component","runtime/templating/lifecycle","runtime/templating/shadow-dom","runtime/templating/view-engine","runtime/templating/view-slot","runtime/templating/view","svg/binding/svg-analyzer"]}})}

src/runtime/templating/view-engine.ts

@@ -14,6 +14,8 @@ import { IBindScope } from "../binding/observation";
 import { IScope } from "../binding/binding-context";
 import { Constructable } from "../interfaces";
 import { IAttach, AttachContext, DetachContext } from "./lifecycle";
+import { Animator } from "./animator";
+import { Reporter } from "../reporter";
 
 export interface ITemplate {
   readonly container: IContainer;
@@ -46,16 +48,19 @@ const noViewTemplate: ITemplate = {
 type RenderCallback = (visual: IVisual, owner: any, index?: number) => void;
 
 export interface IVisual extends IBindScope, IViewOwner { 
-  /**
-  * If the visual requests animation upon add/remove, this property returns the element to be animated.
-  */
-  readonly animationRoot: Element;
-
   /**
   * The IViewFactory that built this instance.
   */
   readonly factory: IViewFactory;
 
+  /**
+   *   Runs the animator against the first animatable element found within the view's fragment
+   *   @param  visual The view to use when searching for the element.
+   *   @param  direction The animation direction enter|leave.
+   *   @returns An animation complete Promise or undefined if no animation was run.
+   */
+  animate(direction: 'enter' | 'leave'): void | Promise<boolean>;
+
   /**
   * Attempts to return this view to the appropriate view cache.
   */
@@ -349,7 +354,7 @@ abstract class Visual implements IVisual {
 
   abstract createView(): IView;
 
-  get animationRoot(): Element {
+  getAnimationRoot(): Element {
     if (this.$animationRoot !== undefined) {
       return this.$animationRoot;
     }
@@ -370,6 +375,23 @@ abstract class Visual implements IVisual {
     return this.$animationRoot = null;
   }
 
+  animate(direction: 'enter' | 'leave' = 'enter'): void | Promise<boolean> {
+    const element = this.getAnimationRoot();
+
+    if (element === null) {
+      return;
+    }
+
+    switch (direction) {
+      case 'enter':
+        return Animator.enter(element);
+      case 'leave':
+        return Animator.leave(element);
+      default:
+        throw Reporter.error(4, direction);
+    }
+  }
+
   bind(scope: IScope) {
     if (this.$isBound) {
       if (this.$scope === scope) {