testing reverse

core/src/utils/animation/animation.ts

@@ -15,6 +15,7 @@ export interface Animation {
   afterStylesValue: { [property: string]: any };
 
   animationFinish(): void;
+  tempReverse(): void;
 
   play(): Animation;
   playAsync(): Promise<Animation>;
@@ -670,11 +671,7 @@ export const createAnimation = (): Animation => {
   };
 
   const progressStep = (step: number): Animation => {
-    if (step > 1) {
-      step = 0.99;
-    } else if (step < 0) {
-      step = 0;
-    }
+    step = Math.min(Math.max(step, 0), 1);
 
     childAnimations.forEach(animation => {
       animation.progressStep(step);
@@ -700,6 +697,14 @@ export const createAnimation = (): Animation => {
 
     return generatePublicAPI();
   };
+  
+  const tempReverse = () => {
+    webAnimations.forEach(animation => {
+      animation.effect.updateTiming({
+        direction: 'reverse'
+      });
+    });
+  }
 
   const progressStart = (forceLinearEasing = false): Animation => {
     childAnimations.forEach(animation => {
@@ -714,12 +719,21 @@ export const createAnimation = (): Animation => {
   };
 
   const progressEnd = (shouldComplete: boolean, step: number): Animation => {
+    
     console.log(shouldComplete, step);
 
     shouldForceLinearEasing = false;
+    
+    if (!shouldComplete) {
+      tempReverse();
+            
+      childAnimations.forEach(animation => animation.tempReverse());
+      
+      console.log(webAnimations)
+    }
 
     // temp
-    play();
+    //play();
 
     return generatePublicAPI();
   };
@@ -767,8 +781,10 @@ export const createAnimation = (): Animation => {
       animation.play();
     });
 
-    initializeAnimation();
-
+    if (!initialized) {
+      initializeAnimation();
+    }
+    
     if (supportsWebAnimations()) {
       webAnimations.forEach(animation => {
         animation.play();
@@ -857,6 +873,7 @@ export const createAnimation = (): Animation => {
       afterStylesValue,
 
       animationFinish,
+      tempReverse,
 
       from,
       to,

core/src/utils/transition/index.ts

@@ -83,10 +83,11 @@ const animation = async (animationBuilder: AnimationBuilder, opts: TransitionOpt
   const anim = ((opts.mode === 'ios')
     ? (await iosTransitionAnimation()).newIosTransitionAnimation(opts.baseEl, opts)
     : (await mdTransitionAnimation()).newMdTransitionAnimation(opts) as any);
+    
+    trans;
 
-  console.log(trans, anim);
-
-  await playTransition(anim, opts);
+  const result = await playTransition(anim, opts);
+  console.log('final',result);
 
   anim.hasCompleted = true;
 
@@ -140,7 +141,11 @@ const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElemen
 
 const playTransition = async (trans: any, opts: TransitionOptions): Promise<Animation> => {
   const progressCallback = opts.progressCallback;
-  const promise = new Promise<Animation>(resolve => trans.onFinish(resolve));
+  const promise = new Promise<Animation>(resolve => {
+    trans.onFinish((animation: any) => {
+      resolve(animation);
+    })
+  });
 
   // cool, let's do this, start the transition
   if (progressCallback) {