feat: add trigger prop to TransitionLink.

This prop takes an async function with the entering and exiting pages as it's arguments. This allows awaiting each node so that a single transition can be made using both nodes. It allows for flip animations between pages.

src/components/TransitionHandler.js

@@ -34,6 +34,7 @@ export default class TransitionHandler extends Component {
           transitionIdHistory,
           inTransition,
           updateContext,
+          triggerResolve,
           e
         }) => {
           return (
@@ -61,6 +62,7 @@ export default class TransitionHandler extends Component {
                             exitProps,
                             pathname,
                             updateContext,
+                            triggerResolve,
                             e
                           })
                         }
@@ -73,6 +75,7 @@ export default class TransitionHandler extends Component {
                             exitTrigger,
                             entryProps,
                             exitProps,
+                            triggerResolve,
                             e
                           })
                         }

src/components/TransitionLink.js

@@ -14,6 +14,7 @@ const TransitionLink = ({
   style,
   className,
   onClick,
+  trigger,
   ...rest
 }) => {
   return (
@@ -29,11 +30,12 @@ const TransitionLink = ({
               to,
               exit,
               entry,
+              trigger,
               ...context
-            })
+            });
 
-            if (typeof onClick === 'function') {
-              onClick(event)
+            if (typeof onClick === "function") {
+              onClick(event);
             }
           }}
           to={to} // use gatsby link so prefetching still happens. this is prevent defaulted in triggertransition

src/context/InternalProvider.js

@@ -24,6 +24,29 @@ class InternalProvider extends Component {
     updateContext: obj => this.setState(obj)
   };
 
+  componentDidMount() {
+    let exitResolve;
+    const exitPromise = new Promise(resolve => {
+      exitResolve = resolve;
+    });
+
+    let entryResolve;
+    const entryPromise = new Promise(resolve => {
+      entryResolve = resolve;
+    });
+
+    this.state.updateContext({
+      triggerResolve: {
+        entry: entryResolve,
+        exit: exitResolve
+      },
+      pages: {
+        exit: exitPromise,
+        entry: entryPromise
+      }
+    });
+  }
+
   render() {
     return <Provider value={this.state}>{this.props.children}</Provider>;
   }

src/functions/onEnter.js

@@ -4,6 +4,7 @@ const onEnter = ({
   entryTrigger,
   entryProps,
   exitProps,
+  triggerResolve,
   pathname,
   e
 }) => {
@@ -17,6 +18,13 @@ const onEnter = ({
 
   if (!inTransition) return;
 
+  const { trigger: removed, ...entryPropsTrimmed } = entryProps;
+
+  triggerResolve.entry({
+    ...entryPropsTrimmed,
+    node
+  });
+
   entryTrigger &&
     typeof entryTrigger === "function" &&
     entryTrigger({

src/functions/onExit.js

@@ -4,10 +4,18 @@ const onExit = ({
   exitTrigger,
   entryProps,
   exitProps,
+  triggerResolve,
   e
 }) => {
   if (!inTransition) return;
 
+  const { trigger: removed, ...exitPropsTrimmed } = exitProps;
+
+  triggerResolve.exit({
+    ...exitPropsTrimmed,
+    node
+  });
+
   return (
     exitTrigger &&
     typeof exitTrigger === "function" &&

src/utils/triggerTransition.js

@@ -10,6 +10,8 @@ const triggerTransition = ({
   entry = {},
   inTransition,
   transitionIdHistory,
+  pages,
+  trigger,
   updateContext
 }) => {
   event.persist();
@@ -28,6 +30,8 @@ const triggerTransition = ({
     exitState: {}
   });
 
+  trigger(pages);
+
   const {
     length: exitLength = 0,
     delay: exitDelay = 0,