Remove use of Animated.delay and sequence for CSS transition polyfill

We can use the `delay` field in the config for `timing` and `spring`
rather than using `Animated.delay` and `Animated.sequence`. This should
help with animation sequencing and avoid depending on
`onAnimationComplete` events firing.

Author: necolas

apps/examples/src/components/App.js

@@ -731,6 +731,7 @@ const styles = css.create({
   },
   transitionOpacity: {
     backgroundColor: 'red',
+    transitionDelay: '250ms',
     transitionDuration: '0.5s',
     transitionProperty: 'opacity',
     transitionTimingFunction: 'ease'

packages/react-strict-dom/src/native/modules/useStyleTransition.js

@@ -195,6 +195,7 @@ function transitionStyleHasChanged(
 
 function getAnimation(
   animatedValue: ReactNative.Animated.Value,
+  delay: number,
   duration: number,
   timingFunction: string | null,
   shouldUseNativeDriver: boolean
@@ -210,6 +211,7 @@ function getAnimation(
         `spring() timing function of "${timingFunction}" is missing closing parenthesis.`
       );
       return ReactNative.Animated.timing(animatedValue, {
+        delay,
         duration,
         easing: getEasingFunction(null),
         toValue: 1,
@@ -244,6 +246,7 @@ function getAnimation(
     }
 
     return ReactNative.Animated.spring(animatedValue, {
+      delay,
       damping,
       mass,
       stiffness,
@@ -254,6 +257,7 @@ function getAnimation(
   }
 
   return ReactNative.Animated.timing(animatedValue, {
+    delay,
     duration,
     easing: getEasingFunction(timingFunction),
     toValue: 1,
@@ -324,15 +328,13 @@ export function useStyleTransition(style: ReactNativeStyle): ReactNativeStyle {
       const { delay, duration, timingFunction, shouldUseNativeDriver } =
         transitionMetadataRef.current;
 
-      const animation = ReactNative.Animated.sequence([
-        ReactNative.Animated.delay(delay),
-        getAnimation(
-          animatedValue,
-          duration,
-          timingFunction,
-          shouldUseNativeDriver
-        )
-      ]);
+      const animation = getAnimation(
+        animatedValue,
+        delay,
+        duration,
+        timingFunction,
+        shouldUseNativeDriver
+      );
       animation.start();
 
       return () => {

packages/react-strict-dom/tests/__mocks__/react-native/index.js

@@ -19,7 +19,10 @@ export const Animated = {
   }),
   timing: jest.fn(() => {
     return {
-      start: jest.fn()
+      start: jest.fn((callback) => {
+        callback && callback();
+      }),
+      stop: jest.fn()
     };
   }),
   delay: jest.fn(),
@@ -33,7 +36,10 @@ export const Animated = {
   }),
   spring: jest.fn(() => {
     return {
-      start: jest.fn()
+      start: jest.fn((callback) => {
+        callback && callback();
+      }),
+      stop: jest.fn()
     };
   })
 };

packages/react-strict-dom/tests/html-test.native.js

@@ -622,7 +622,7 @@ describe('<html.*>', () => {
         expect(console.warn).not.toHaveBeenCalledWith(
           expect.stringContaining('React Strict DOM')
         );
-        expect(Animated.sequence).not.toHaveBeenCalled();
+        expect(Animated.timing).not.toHaveBeenCalled();
         expect(root.toJSON()).toMatchSnapshot('default');
       });
 
@@ -638,14 +638,14 @@ describe('<html.*>', () => {
         expect(console.error).not.toHaveBeenCalledWith(
           expect.stringContaining('React Strict DOM')
         );
-        expect(Animated.sequence).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalled();
         expect(root.toJSON()).toMatchSnapshot('red to green');
-        Animated.sequence.mockClear();
+        Animated.timing.mockClear();
 
         act(() => {
           root.update(<html.div style={styles.backgroundColor('blue')} />);
         });
-        expect(Animated.sequence).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalled();
         expect(root.toJSON()).toMatchSnapshot('green to blue');
       });
 
@@ -664,6 +664,14 @@ describe('<html.*>', () => {
         });
         expect(root.toJSON()).toMatchSnapshot('end');
         expect(Easing.inOut).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({
+            delay: 200,
+            duration: 2000,
+            useNativeDriver: false
+          })
+        );
       });
 
       test('opacity transition', () => {
@@ -679,6 +687,14 @@ describe('<html.*>', () => {
         });
         expect(root.toJSON()).toMatchSnapshot('end');
         expect(Easing.in).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({
+            delay: 50,
+            duration: 1000,
+            useNativeDriver: true
+          })
+        );
       });
 
       test('transform transition', () => {
@@ -698,6 +714,14 @@ describe('<html.*>', () => {
         });
         expect(root.toJSON()).toMatchSnapshot('end');
         expect(Easing.out).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({
+            delay: 0,
+            duration: 1000,
+            useNativeDriver: true
+          })
+        );
       });
 
       test('width transition', () => {
@@ -713,6 +737,14 @@ describe('<html.*>', () => {
         });
         expect(root.toJSON()).toMatchSnapshot('end');
         expect(Easing.out).toHaveBeenCalled();
+        expect(Animated.timing).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({
+            delay: 0,
+            duration: 500,
+            useNativeDriver: false
+          })
+        );
       });
 
       test('cubic-bezier() timing function', () => {