animate-presence - npm Package Compare versions

Comparing version 0.0.0-5a2454a to 0.0.0-b119969

dist/animate-presence/animate-presence.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-ddf6632f.js";e().then(e=>t([["p-iwgqoyrr",[[1,"animate-presence",{__presenceKey:[1,"__presence-key"],descendants:[16],observe:[1028],orchestrate:[1],orchestrateEnter:[1,"orchestrate-enter"],orchestrateExit:[1,"orchestrate-exit"],registerChild:[64],unregisterChild:[64],exit:[64],enter:[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["p-bzzfld0s",[[4,"animated-route-switch",{group:[513],routeViewsUpdated:[16],scrollTopOffset:[2,"scroll-top-offset"],location:[16]}]]]],e));
+import{p as e,b as t}from"./p-ddf6632f.js";e().then(e=>t([["p-nblgdcm6",[[1,"animate-presence",{__presenceKey:[1,"__presence-key"],descendants:[16],flip:[4,"__unstable-flip"],observe:[1028],registerChild:[64],unregisterChild:[64],exit:[64],enter:[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["p-zfsn7zn0",[[4,"animated-route-switch",{group:[513],routeViewsUpdated:[16],scrollTopOffset:[2,"scroll-top-offset"],location:[16]}]]]],e));

dist/animate-presence/p-c2b2b297.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-f92d870d.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-dxkrgjo6.system",[[1,"animate-presence",{__presenceKey:[1,"__presence-key"],descendants:[16],observe:[1028],orchestrate:[1],orchestrateEnter:[1,"orchestrate-enter"],orchestrateExit:[1,"orchestrate-exit"],registerChild:[64],unregisterChild:[64],exit:[64],enter:[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["p-1d1wj2w9.system",[[4,"animated-route-switch",{group:[513],routeViewsUpdated:[16],scrollTopOffset:[2,"scroll-top-offset"],location:[16]}]]]],e)}))}}}));
+System.register(["./p-f92d870d.system.js"],(function(){"use strict";var e,t;return{setters:[function(s){e=s.p;t=s.b}],execute:function(){e().then((function(e){return t([["p-qgiqt8k4.system",[[1,"animate-presence",{__presenceKey:[1,"__presence-key"],descendants:[16],flip:[4,"__unstable-flip"],observe:[1028],registerChild:[64],unregisterChild:[64],exit:[64],enter:[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["p-0zbqoeha.system",[[4,"animated-route-switch",{group:[513],routeViewsUpdated:[16],scrollTopOffset:[2,"scroll-top-offset"],location:[16]}]]]],e)}))}}}));

dist/cjs/animate-presence.cjs.entry.js

@@ -7,3 +7,3 @@ 'use strict';
 require('./presence-handler-28bf26d6.js');
-const index = require('./index-f1960680.js');
+const index = require('./index-16a1f1d1.js');
 
@@ -27,2 +27,4 @@ const hold = (el) => async (cb) => {
         this.descendants = [];
+        this.flipCache = new Map();
+        this.flip = false;
         this.getClosestParent = () => {
@@ -46,5 +48,7 @@ var _a;
             this.mo.observe(this.element, {
+                subtree: this.flip,
                 childList: true,
                 attributes: true,
-                attributeFilter: ['data-key'],
+                attributeOldValue: this.flip,
+                attributeFilter: this.flip ? ['data-key', 'class', 'style'] : undefined,
             });
@@ -57,3 +61,3 @@ }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b;
         index.injectGlobalStyle();
@@ -64,15 +68,11 @@ this.ancestor = this.getClosestParent();
         }
-        if (typeof this.orchestrate === 'undefined') {
-            this.orchestrate = (_d = (_c = this.ancestor) === null || _c === void 0 ? void 0 : _c.orchestrate, (_d !== null && _d !== void 0 ? _d : 'sequential'));
-        }
-        if (typeof this.orchestrateEnter === 'undefined') {
-            this.orchestrateEnter = (_f = (_e = this.ancestor) === null || _e === void 0 ? void 0 : _e.orchestrateEnter, (_f !== null && _f !== void 0 ? _f : this.orchestrate));
-        }
-        if (typeof this.orchestrateExit === 'undefined') {
-            this.orchestrateExit = (_h = (_g = this.ancestor) === null || _g === void 0 ? void 0 : _g.orchestrateExit, (_h !== null && _h !== void 0 ? _h : this.orchestrate));
-        }
         Array.from(this.element.children).map((el, i) => {
-            index.setCustomProperties(el, { i });
-            el.style.setProperty('animation-play-state', 'paused');
-            el.dataset.enter = '';
+            if (index.hasData(el, 'key')) {
+                this.flipCache.set(el.dataset.key, index.getBounds(el));
+            }
+            else {
+                index.setCustomProperties(el, { i });
+                el.style.setProperty('animation-play-state', 'paused');
+                el.dataset.enter = '';
+            }
         });
@@ -95,2 +95,5 @@ }
     async enterNode(el, i = 0) {
+        if (index.hasData(el, 'key')) {
+            return this.handleFlip(el);
+        }
         delete el.dataset.exit;
@@ -108,5 +111,4 @@ const event = new CustomEvent('animatePresenceEnter', {
         index.setCustomProperties(el, { i });
-        const enter = () => index.presence(el, {
+        await index.presence(el, {
             afterSelf: async () => {
-                delete el.dataset.initial;
                 delete el.dataset.enter;
@@ -116,44 +118,64 @@ el.style.removeProperty('--i');
         });
-        if (this.orchestrateEnter === 'sequential') {
-            await enter();
-            await index.enterChildren(el);
-        }
-        else if (this.orchestrateEnter === 'parallel') {
-            await Promise.all([enter(), index.enterChildren(el)]);
-        }
-        return Promise.resolve();
+        return index.enterChildren(el);
     }
     async exitNode(el, method = 'remove', i = 0) {
-        const exit = () => {
-            delete el.dataset.willExit;
-            index.setCustomProperties(el, { i });
-            const event = new CustomEvent('animatePresenceExit', {
-                bubbles: true,
-                detail: {
-                    i,
-                    hold: hold(el),
-                },
-            });
-            el.dispatchEvent(event);
-            el.dataset.exit = '';
-            return index.presence(el, {
-                afterSelf: () => {
-                    if (method === 'remove') {
-                        el.remove();
-                    }
-                    else if (method === 'hide') {
-                        el.style.setProperty('visibility', 'hidden');
-                    }
-                },
-            });
+        const handleEnd = () => {
+            if (method === 'remove') {
+                el.remove();
+            }
+            else if (method === 'hide') {
+                el.style.setProperty('visibility', 'hidden');
+            }
         };
-        if (this.orchestrateExit === 'sequential') {
-            await index.exitChildren(el);
-            await exit();
+        if (index.hasData(el, 'key')) {
+            this.flipCache.set(el.dataset.key, index.getBounds(el));
+            handleEnd();
+            return Promise.resolve();
         }
-        else if (this.orchestrateExit === 'parallel') {
-            await Promise.all([index.exitChildren(el), exit()]);
-        }
+        await index.exitChildren(el);
+        delete el.dataset.willExit;
+        index.setCustomProperties(el, { i });
+        const event = new CustomEvent('animatePresenceExit', {
+            bubbles: true,
+            detail: {
+                i,
+                hold: hold(el),
+            },
+        });
+        el.dispatchEvent(event);
+        el.dataset.exit = '';
+        await index.presence(el, {
+            afterSelf: handleEnd,
+        });
         return Promise.resolve();
     }
+    // private async flipNode(el: HTMLElement) {
+    //   if (hasData(el, 'flip')) return;
+    //   const prev = this.flipCache.get(el.dataset.key);
+    //   const curr = getStyle(el);
+    //   const initialStyle = el.getAttribute('style');
+    //   const diff = diffStyles(curr, prev);
+    //   if (Object.keys(diff).length > 0) {
+    //     for (const [key, { previous }] of Object.entries(diff)) {
+    //       el.style.setProperty(key, `${previous}`);
+    //     }
+    //     await Promise.resolve();
+    //     el.dataset.flip = '';
+    //     await presence(el, {
+    //       init: () => {
+    //         el.setAttribute('style', initialStyle);
+    //       },
+    //       afterSelf: () => {
+    //         delete el.dataset.flip;
+    //         this.flipCache.set(el.dataset.key, curr);
+    //       },
+    //       onCancel: () => {
+    //         this.flipCache.set(el.dataset.key, {});
+    //         delete el.dataset.flip;
+    //       },
+    //     });
+    //   } else {
+    //     this.flipCache.set(el.dataset.key, curr);
+    //   }
+    // }
     async handleEnter(node, _record, i) {
@@ -186,2 +208,39 @@ if (!index.isHTMLElement(node))
     }
+    async handleFlip(node) {
+        if (!index.isHTMLElement(node))
+            return;
+        if (!index.hasData(node, 'key'))
+            return;
+        const key = node.dataset.key;
+        if (index.hasData(node, 'flip'))
+            return;
+        const prev = this.flipCache.get(key);
+        const curr = index.getBounds(node);
+        if (prev.width === 0 && prev.height === 0) {
+            this.flipCache.set(key, curr);
+            return;
+        }
+        if (!index.hasData(node, 'willFlip')) {
+            const delta = index.getDelta(prev, curr);
+            console.log(delta);
+            node.dataset.willFlip = '';
+            node.style.setProperty('transform', `translate(${delta.left}px, ${delta.top}px) scale(${delta.width}, ${delta.height})`);
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            node.dataset.flip = '';
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            await index.presence(node, {
+                init: () => {
+                    node.style.removeProperty('transform');
+                    delete node.dataset.willFlip;
+                },
+                afterSelf: async () => {
+                    this.flipCache.set(key, curr);
+                    delete node.dataset.flip;
+                },
+                onCancel() {
+                    node.dataset.flip = 'continue';
+                },
+            });
+        }
+    }
     handleMutation(records) {
@@ -196,2 +255,9 @@ let i = 0;
             }
+            if (record.type === 'attributes' &&
+                record.attributeName &&
+                ['class', 'style'].includes(record.attributeName)) {
+                const el = record.target;
+                if (index.isHTMLElement(el))
+                    this.handleFlip(el);
+            }
             i++;
@@ -198,0 +264,0 @@ }

dist/cjs/animate-presence.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["animate-presence.cjs",[[1,"animate-presence",{"__presenceKey":[1,"__presence-key"],"descendants":[16],"observe":[1028],"orchestrate":[1],"orchestrateEnter":[1,"orchestrate-enter"],"orchestrateExit":[1,"orchestrate-exit"],"registerChild":[64],"unregisterChild":[64],"exit":[64],"enter":[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["animated-route-switch.cjs",[[4,"animated-route-switch",{"group":[513],"routeViewsUpdated":[16],"scrollTopOffset":[2,"scroll-top-offset"],"location":[16]}]]]], options);
+  return core.bootstrapLazy([["animate-presence.cjs",[[1,"animate-presence",{"__presenceKey":[1,"__presence-key"],"descendants":[16],"flip":[4,"__unstable-flip"],"observe":[1028],"registerChild":[64],"unregisterChild":[64],"exit":[64],"enter":[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["animated-route-switch.cjs",[[4,"animated-route-switch",{"group":[513],"routeViewsUpdated":[16],"scrollTopOffset":[2,"scroll-top-offset"],"location":[16]}]]]], options);
 });

dist/cjs/animated-route-switch.cjs.entry.js

@@ -7,3 +7,3 @@ 'use strict';
 require('./presence-handler-28bf26d6.js');
-const index = require('./index-f1960680.js');
+const index = require('./index-16a1f1d1.js');
 
@@ -10,0 +10,0 @@ /**

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["animate-presence.cjs",[[1,"animate-presence",{"__presenceKey":[1,"__presence-key"],"descendants":[16],"observe":[1028],"orchestrate":[1],"orchestrateEnter":[1,"orchestrate-enter"],"orchestrateExit":[1,"orchestrate-exit"],"registerChild":[64],"unregisterChild":[64],"exit":[64],"enter":[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["animated-route-switch.cjs",[[4,"animated-route-switch",{"group":[513],"routeViewsUpdated":[16],"scrollTopOffset":[2,"scroll-top-offset"],"location":[16]}]]]], options);
+    core.bootstrapLazy([["animate-presence.cjs",[[1,"animate-presence",{"__presenceKey":[1,"__presence-key"],"descendants":[16],"flip":[4,"__unstable-flip"],"observe":[1028],"registerChild":[64],"unregisterChild":[64],"exit":[64],"enter":[64]},[[0,"animatePresenceExitComplete","animatePresenceExitCompleteHandler"]]]]],["animated-route-switch.cjs",[[4,"animated-route-switch",{"group":[513],"routeViewsUpdated":[16],"scrollTopOffset":[2,"scroll-top-offset"],"location":[16]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/components/animate-presence/animate-presence.js

 import { h, Host } from "@stencil/core";
-import { setCustomProperties, isHTMLElement, hasData, presence, closest, enterChildren, exitChildren, injectGlobalStyle, } from '../../utils';
+import { setCustomProperties, isHTMLElement, hasData, presence, closest, enterChildren, exitChildren, injectGlobalStyle, getBounds, getDelta, } from '../../utils';
 const hold = (el) => async (cb) => {
@@ -19,2 +19,4 @@ el.dataset.hold = '';
         this.descendants = [];
+        this.flipCache = new Map();
+        this.flip = false;
         this.getClosestParent = () => {
@@ -35,5 +37,7 @@ var _a;
             this.mo.observe(this.element, {
+                subtree: this.flip,
                 childList: true,
                 attributes: true,
-                attributeFilter: ['data-key'],
+                attributeOldValue: this.flip,
+                attributeFilter: this.flip ? ['data-key', 'class', 'style'] : undefined,
             });
@@ -46,3 +50,3 @@ }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b;
         injectGlobalStyle();
@@ -53,15 +57,11 @@ this.ancestor = this.getClosestParent();
         }
-        if (typeof this.orchestrate === 'undefined') {
-            this.orchestrate = (_d = (_c = this.ancestor) === null || _c === void 0 ? void 0 : _c.orchestrate, (_d !== null && _d !== void 0 ? _d : 'sequential'));
-        }
-        if (typeof this.orchestrateEnter === 'undefined') {
-            this.orchestrateEnter = (_f = (_e = this.ancestor) === null || _e === void 0 ? void 0 : _e.orchestrateEnter, (_f !== null && _f !== void 0 ? _f : this.orchestrate));
-        }
-        if (typeof this.orchestrateExit === 'undefined') {
-            this.orchestrateExit = (_h = (_g = this.ancestor) === null || _g === void 0 ? void 0 : _g.orchestrateExit, (_h !== null && _h !== void 0 ? _h : this.orchestrate));
-        }
         Array.from(this.element.children).map((el, i) => {
-            setCustomProperties(el, { i });
-            el.style.setProperty('animation-play-state', 'paused');
-            el.dataset.enter = '';
+            if (hasData(el, 'key')) {
+                this.flipCache.set(el.dataset.key, getBounds(el));
+            }
+            else {
+                setCustomProperties(el, { i });
+                el.style.setProperty('animation-play-state', 'paused');
+                el.dataset.enter = '';
+            }
         });
@@ -84,2 +84,5 @@ }
     async enterNode(el, i = 0) {
+        if (hasData(el, 'key')) {
+            return this.handleFlip(el);
+        }
         delete el.dataset.exit;
@@ -97,5 +100,4 @@ const event = new CustomEvent('animatePresenceEnter', {
         setCustomProperties(el, { i });
-        const enter = () => presence(el, {
+        await presence(el, {
             afterSelf: async () => {
-                delete el.dataset.initial;
                 delete el.dataset.enter;
@@ -105,44 +107,64 @@ el.style.removeProperty('--i');
         });
-        if (this.orchestrateEnter === 'sequential') {
-            await enter();
-            await enterChildren(el);
-        }
-        else if (this.orchestrateEnter === 'parallel') {
-            await Promise.all([enter(), enterChildren(el)]);
-        }
-        return Promise.resolve();
+        return enterChildren(el);
     }
     async exitNode(el, method = 'remove', i = 0) {
-        const exit = () => {
-            delete el.dataset.willExit;
-            setCustomProperties(el, { i });
-            const event = new CustomEvent('animatePresenceExit', {
-                bubbles: true,
-                detail: {
-                    i,
-                    hold: hold(el),
-                },
-            });
-            el.dispatchEvent(event);
-            el.dataset.exit = '';
-            return presence(el, {
-                afterSelf: () => {
-                    if (method === 'remove') {
-                        el.remove();
-                    }
-                    else if (method === 'hide') {
-                        el.style.setProperty('visibility', 'hidden');
-                    }
-                },
-            });
+        const handleEnd = () => {
+            if (method === 'remove') {
+                el.remove();
+            }
+            else if (method === 'hide') {
+                el.style.setProperty('visibility', 'hidden');
+            }
         };
-        if (this.orchestrateExit === 'sequential') {
-            await exitChildren(el);
-            await exit();
+        if (hasData(el, 'key')) {
+            this.flipCache.set(el.dataset.key, getBounds(el));
+            handleEnd();
+            return Promise.resolve();
         }
-        else if (this.orchestrateExit === 'parallel') {
-            await Promise.all([exitChildren(el), exit()]);
-        }
+        await exitChildren(el);
+        delete el.dataset.willExit;
+        setCustomProperties(el, { i });
+        const event = new CustomEvent('animatePresenceExit', {
+            bubbles: true,
+            detail: {
+                i,
+                hold: hold(el),
+            },
+        });
+        el.dispatchEvent(event);
+        el.dataset.exit = '';
+        await presence(el, {
+            afterSelf: handleEnd,
+        });
         return Promise.resolve();
     }
+    // private async flipNode(el: HTMLElement) {
+    //   if (hasData(el, 'flip')) return;
+    //   const prev = this.flipCache.get(el.dataset.key);
+    //   const curr = getStyle(el);
+    //   const initialStyle = el.getAttribute('style');
+    //   const diff = diffStyles(curr, prev);
+    //   if (Object.keys(diff).length > 0) {
+    //     for (const [key, { previous }] of Object.entries(diff)) {
+    //       el.style.setProperty(key, `${previous}`);
+    //     }
+    //     await Promise.resolve();
+    //     el.dataset.flip = '';
+    //     await presence(el, {
+    //       init: () => {
+    //         el.setAttribute('style', initialStyle);
+    //       },
+    //       afterSelf: () => {
+    //         delete el.dataset.flip;
+    //         this.flipCache.set(el.dataset.key, curr);
+    //       },
+    //       onCancel: () => {
+    //         this.flipCache.set(el.dataset.key, {});
+    //         delete el.dataset.flip;
+    //       },
+    //     });
+    //   } else {
+    //     this.flipCache.set(el.dataset.key, curr);
+    //   }
+    // }
     async handleEnter(node, _record, i) {
@@ -175,2 +197,39 @@ if (!isHTMLElement(node))
     }
+    async handleFlip(node) {
+        if (!isHTMLElement(node))
+            return;
+        if (!hasData(node, 'key'))
+            return;
+        const key = node.dataset.key;
+        if (hasData(node, 'flip'))
+            return;
+        const prev = this.flipCache.get(key);
+        const curr = getBounds(node);
+        if (prev.width === 0 && prev.height === 0) {
+            this.flipCache.set(key, curr);
+            return;
+        }
+        if (!hasData(node, 'willFlip')) {
+            const delta = getDelta(prev, curr);
+            console.log(delta);
+            node.dataset.willFlip = '';
+            node.style.setProperty('transform', `translate(${delta.left}px, ${delta.top}px) scale(${delta.width}, ${delta.height})`);
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            node.dataset.flip = '';
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            await presence(node, {
+                init: () => {
+                    node.style.removeProperty('transform');
+                    delete node.dataset.willFlip;
+                },
+                afterSelf: async () => {
+                    this.flipCache.set(key, curr);
+                    delete node.dataset.flip;
+                },
+                onCancel() {
+                    node.dataset.flip = 'continue';
+                },
+            });
+        }
+    }
     handleMutation(records) {
@@ -185,2 +244,9 @@ let i = 0;
             }
+            if (record.type === 'attributes' &&
+                record.attributeName &&
+                ['class', 'style'].includes(record.attributeName)) {
+                const el = record.target;
+                if (isHTMLElement(el))
+                    this.handleFlip(el);
+            }
             i++;
@@ -306,5 +372,5 @@ }
         },
-        "observe": {
+        "flip": {
             "type": "boolean",
-            "mutable": true,
+            "mutable": false,
             "complexType": {
@@ -319,47 +385,14 @@ "original": "boolean",
                 "tags": [],
-                "text": "If `true` (default), a MutationObserver will automatically be connected to enable animations when a child node enters/exits.\n\nIf you know the children are static (typical `animated-route-switch` use case), `false` may improve performance.\n\nNote: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,\n\nwhich means MutationObservers can be disabled for the entire tree by setting `observe={false}` on the top-level element.\n\nHowever, directly set values always take precedence over inherited values."
-            },
-            "attribute": "observe",
-            "reflect": false
-        },
-        "orchestrate": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "'sequential' | 'parallel'",
-                "resolved": "\"parallel\" | \"sequential\"",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Changes the behavior of nested `<animate-presence>` elements.\n\n`sequential` (default) will enter from the top-down and exit from the bottom-up.\n\n`parallel` will trigger all entrances and exits in parallel\n\nNote: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,"
-            },
-            "attribute": "orchestrate",
-            "reflect": false
-        },
-        "orchestrateEnter": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "'sequential' | 'parallel'",
-                "resolved": "\"parallel\" | \"sequential\"",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
                 "text": ""
             },
-            "attribute": "orchestrate-enter",
-            "reflect": false
+            "attribute": "__unstable-flip",
+            "reflect": false,
+            "defaultValue": "false"
         },
-        "orchestrateExit": {
-            "type": "string",
-            "mutable": false,
+        "observe": {
+            "type": "boolean",
+            "mutable": true,
             "complexType": {
-                "original": "'sequential' | 'parallel'",
-                "resolved": "\"parallel\" | \"sequential\"",
+                "original": "boolean",
+                "resolved": "boolean",
                 "references": {}
@@ -371,5 +404,5 @@ },
                 "tags": [],
-                "text": ""
+                "text": "If `true` (default), a MutationObserver will automatically be connected to enable animations when a child node enters/exits.\n\nIf you know the children are static (typical `animated-route-switch` use case), `false` may improve performance.\n\nNote: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,\n\nwhich means MutationObservers can be disabled for the entire tree by setting `observe={false}` on the top-level element.\n\nHowever, directly set values always take precedence over inherited values."
             },
-            "attribute": "orchestrate-exit",
+            "attribute": "observe",
             "reflect": false
@@ -376,0 +409,0 @@ }

dist/collection/utils/index.js

 export * from './presence-handler';
+export * from './flip';
 export const nextTick = /*@__PURE__*/ (cb) => Promise.resolve().then(cb);
 export const presence = (element, hooks = {}) => {
-    const { afterSelf } = hooks;
+    var _a;
+    const { init, afterSelf, onCancel } = hooks;
+    (_a = init) === null || _a === void 0 ? void 0 : _a();
     return new Promise(async (resolve) => {
@@ -31,3 +34,8 @@ var _a;
             })
-                .catch(() => { });
+                .catch(() => {
+                var _a;
+                (_a = onCancel) === null || _a === void 0 ? void 0 : _a();
+                resolve();
+                return;
+            });
         }
@@ -66,3 +74,3 @@ else {
 };
-const kebab = (str) => str.replace(/([A-Z])/g, `-$1`).toLowerCase();
+export const kebab = (str) => str.replace(/([A-Z])/g, `-$1`).toLowerCase();
 export const setCustomProperties = (el, props) => {
@@ -104,5 +112,3 @@ const customProps = convertToCustomProperties(props);
 };
-export const isHTMLElement = (node) => node &&
-    node.nodeType === node.ELEMENT_NODE &&
-    typeof node.tagName !== 'undefined';
+export const isHTMLElement = (node) => node && node instanceof HTMLElement;
 export const hasData = (el, key) => typeof el.dataset[key] !== 'undefined';
@@ -109,0 +115,0 @@ export function closest(selector, base = this) {

dist/esm-es5/animate-presence.entry.js

@@ -46,6 +46,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import './presence-handler-a532ff81.js';
-import { c as closest, i as injectGlobalStyle, s as setCustomProperties, p as presence, e as enterChildren, a as exitChildren, b as isHTMLElement, h as hasData } from './index-3c9d6eb2.js';
+import { c as closest, i as injectGlobalStyle, h as hasData, g as getBounds, s as setCustomProperties, p as presence, e as enterChildren, a as exitChildren, b as isHTMLElement, d as getDelta } from './index-44ad04e8.js';
 var hold = function (el) { return function (cb) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_j) {
-        switch (_j.label) {
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
@@ -60,3 +60,3 @@ el.dataset.hold = '';
             case 1:
-                _j.sent();
+                _c.sent();
                 delete el.dataset.hold;
@@ -75,2 +75,4 @@ return [2 /*return*/];
         this.descendants = [];
+        this.flipCache = new Map();
+        this.flip = false;
         this.getClosestParent = function () {
@@ -94,5 +96,7 @@ var _a;
             this.mo.observe(this.element, {
+                subtree: this.flip,
                 childList: true,
                 attributes: true,
-                attributeFilter: ['data-key'],
+                attributeOldValue: this.flip,
+                attributeFilter: this.flip ? ['data-key', 'class', 'style'] : undefined,
             });
@@ -106,4 +110,5 @@ }
         return __awaiter(this, void 0, void 0, function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            return __generator(this, function (_j) {
+            var _a, _b;
+            var _this = this;
+            return __generator(this, function (_c) {
                 injectGlobalStyle();
@@ -114,15 +119,11 @@ this.ancestor = this.getClosestParent();
                 }
-                if (typeof this.orchestrate === 'undefined') {
-                    this.orchestrate = (_d = (_c = this.ancestor) === null || _c === void 0 ? void 0 : _c.orchestrate, (_d !== null && _d !== void 0 ? _d : 'sequential'));
-                }
-                if (typeof this.orchestrateEnter === 'undefined') {
-                    this.orchestrateEnter = (_f = (_e = this.ancestor) === null || _e === void 0 ? void 0 : _e.orchestrateEnter, (_f !== null && _f !== void 0 ? _f : this.orchestrate));
-                }
-                if (typeof this.orchestrateExit === 'undefined') {
-                    this.orchestrateExit = (_h = (_g = this.ancestor) === null || _g === void 0 ? void 0 : _g.orchestrateExit, (_h !== null && _h !== void 0 ? _h : this.orchestrate));
-                }
                 Array.from(this.element.children).map(function (el, i) {
-                    setCustomProperties(el, { i: i });
-                    el.style.setProperty('animation-play-state', 'paused');
-                    el.dataset.enter = '';
+                    if (hasData(el, 'key')) {
+                        _this.flipCache.set(el.dataset.key, getBounds(el));
+                    }
+                    else {
+                        setCustomProperties(el, { i: i });
+                        el.style.setProperty('animation-play-state', 'paused');
+                        el.dataset.enter = '';
+                    }
                 });
@@ -136,3 +137,3 @@ return [2 /*return*/];
             var _a;
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 this.observeChanged();
@@ -150,3 +151,3 @@ (_a = this.ancestor) === null || _a === void 0 ? void 0 : _a.registerChild(this.element);
             var _a;
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 this.removeMO();
@@ -162,7 +163,10 @@ (_a = this.ancestor) === null || _a === void 0 ? void 0 : _a.unregisterChild(this.__presenceKey);
         return __awaiter(this, void 0, void 0, function () {
-            var event, enter;
+            var event;
             var _this = this;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
+                        if (hasData(el, 'key')) {
+                            return [2 /*return*/, this.handleFlip(el)];
+                        }
                         delete el.dataset.exit;
@@ -180,27 +184,14 @@ event = new CustomEvent('animatePresenceEnter', {
                         setCustomProperties(el, { i: i });
-                        enter = function () { return presence(el, {
-                            afterSelf: function () { return __awaiter(_this, void 0, void 0, function () {
-                                return __generator(this, function (_j) {
-                                    delete el.dataset.initial;
-                                    delete el.dataset.enter;
-                                    el.style.removeProperty('--i');
-                                    return [2 /*return*/];
-                                });
-                            }); },
-                        }); };
-                        if (!(this.orchestrateEnter === 'sequential')) return [3 /*break*/, 3];
-                        return [4 /*yield*/, enter()];
+                        return [4 /*yield*/, presence(el, {
+                                afterSelf: function () { return __awaiter(_this, void 0, void 0, function () {
+                                    return __generator(this, function (_c) {
+                                        delete el.dataset.enter;
+                                        el.style.removeProperty('--i');
+                                        return [2 /*return*/];
+                                    });
+                                }); },
+                            })];
                     case 1:
-                        _j.sent();
-                        return [4 /*yield*/, enterChildren(el)];
-                    case 2:
-                        _j.sent();
-                        return [3 /*break*/, 5];
-                    case 3:
-                        if (!(this.orchestrateEnter === 'parallel')) return [3 /*break*/, 5];
-                        return [4 /*yield*/, Promise.all([enter(), enterChildren(el)])];
-                    case 4:
-                        _j.sent();
-                        _j.label = 5;
-                    case 5: return [2 /*return*/, Promise.resolve()];
+                        _c.sent();
+                        return [2 /*return*/, enterChildren(el)];
                 }
@@ -214,44 +205,39 @@ });
         return __awaiter(this, void 0, void 0, function () {
-            var exit;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            var handleEnd, event;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        exit = function () {
-                            delete el.dataset.willExit;
-                            setCustomProperties(el, { i: i });
-                            var event = new CustomEvent('animatePresenceExit', {
-                                bubbles: true,
-                                detail: {
-                                    i: i,
-                                    hold: hold(el),
-                                },
-                            });
-                            el.dispatchEvent(event);
-                            el.dataset.exit = '';
-                            return presence(el, {
-                                afterSelf: function () {
-                                    if (method === 'remove') {
-                                        el.remove();
-                                    }
-                                    else if (method === 'hide') {
-                                        el.style.setProperty('visibility', 'hidden');
-                                    }
-                                },
-                            });
+                        handleEnd = function () {
+                            if (method === 'remove') {
+                                el.remove();
+                            }
+                            else if (method === 'hide') {
+                                el.style.setProperty('visibility', 'hidden');
+                            }
                         };
-                        if (!(this.orchestrateExit === 'sequential')) return [3 /*break*/, 3];
+                        if (hasData(el, 'key')) {
+                            this.flipCache.set(el.dataset.key, getBounds(el));
+                            handleEnd();
+                            return [2 /*return*/, Promise.resolve()];
+                        }
                         return [4 /*yield*/, exitChildren(el)];
                     case 1:
-                        _j.sent();
-                        return [4 /*yield*/, exit()];
+                        _c.sent();
+                        delete el.dataset.willExit;
+                        setCustomProperties(el, { i: i });
+                        event = new CustomEvent('animatePresenceExit', {
+                            bubbles: true,
+                            detail: {
+                                i: i,
+                                hold: hold(el),
+                            },
+                        });
+                        el.dispatchEvent(event);
+                        el.dataset.exit = '';
+                        return [4 /*yield*/, presence(el, {
+                                afterSelf: handleEnd,
+                            })];
                     case 2:
-                        _j.sent();
-                        return [3 /*break*/, 5];
-                    case 3:
-                        if (!(this.orchestrateExit === 'parallel')) return [3 /*break*/, 5];
-                        return [4 /*yield*/, Promise.all([exitChildren(el), exit()])];
-                    case 4:
-                        _j.sent();
-                        _j.label = 5;
-                    case 5: return [2 /*return*/, Promise.resolve()];
+                        _c.sent();
+                        return [2 /*return*/, Promise.resolve()];
                 }
@@ -261,5 +247,34 @@ });
     };
+    // private async flipNode(el: HTMLElement) {
+    //   if (hasData(el, 'flip')) return;
+    //   const prev = this.flipCache.get(el.dataset.key);
+    //   const curr = getStyle(el);
+    //   const initialStyle = el.getAttribute('style');
+    //   const diff = diffStyles(curr, prev);
+    //   if (Object.keys(diff).length > 0) {
+    //     for (const [key, { previous }] of Object.entries(diff)) {
+    //       el.style.setProperty(key, `${previous}`);
+    //     }
+    //     await Promise.resolve();
+    //     el.dataset.flip = '';
+    //     await presence(el, {
+    //       init: () => {
+    //         el.setAttribute('style', initialStyle);
+    //       },
+    //       afterSelf: () => {
+    //         delete el.dataset.flip;
+    //         this.flipCache.set(el.dataset.key, curr);
+    //       },
+    //       onCancel: () => {
+    //         this.flipCache.set(el.dataset.key, {});
+    //         delete el.dataset.flip;
+    //       },
+    //     });
+    //   } else {
+    //     this.flipCache.set(el.dataset.key, curr);
+    //   }
+    // }
     class_1.prototype.handleEnter = function (node, _record, i) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 if (!isHTMLElement(node))
@@ -281,3 +296,3 @@ return [2 /*return*/];
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 if (!isHTMLElement(node))
@@ -300,6 +315,62 @@ return [2 /*return*/];
     };
+    class_1.prototype.handleFlip = function (node) {
+        return __awaiter(this, void 0, void 0, function () {
+            var key, prev, curr, delta;
+            var _this = this;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!isHTMLElement(node))
+                            return [2 /*return*/];
+                        if (!hasData(node, 'key'))
+                            return [2 /*return*/];
+                        key = node.dataset.key;
+                        if (hasData(node, 'flip'))
+                            return [2 /*return*/];
+                        prev = this.flipCache.get(key);
+                        curr = getBounds(node);
+                        if (prev.width === 0 && prev.height === 0) {
+                            this.flipCache.set(key, curr);
+                            return [2 /*return*/];
+                        }
+                        if (!!hasData(node, 'willFlip')) return [3 /*break*/, 4];
+                        delta = getDelta(prev, curr);
+                        console.log(delta);
+                        node.dataset.willFlip = '';
+                        node.style.setProperty('transform', "translate(" + delta.left + "px, " + delta.top + "px) scale(" + delta.width + ", " + delta.height + ")");
+                        return [4 /*yield*/, new Promise(function (resolve) { return requestAnimationFrame(function () { return requestAnimationFrame(resolve); }); })];
+                    case 1:
+                        _c.sent();
+                        node.dataset.flip = '';
+                        return [4 /*yield*/, new Promise(function (resolve) { return requestAnimationFrame(function () { return requestAnimationFrame(resolve); }); })];
+                    case 2:
+                        _c.sent();
+                        return [4 /*yield*/, presence(node, {
+                                init: function () {
+                                    node.style.removeProperty('transform');
+                                    delete node.dataset.willFlip;
+                                },
+                                afterSelf: function () { return __awaiter(_this, void 0, void 0, function () {
+                                    return __generator(this, function (_c) {
+                                        this.flipCache.set(key, curr);
+                                        delete node.dataset.flip;
+                                        return [2 /*return*/];
+                                    });
+                                }); },
+                                onCancel: function () {
+                                    node.dataset.flip = 'continue';
+                                },
+                            })];
+                    case 3:
+                        _c.sent();
+                        _c.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     class_1.prototype.handleMutation = function (records) {
         var i = 0;
-        for (var _i = 0, _j = records.reverse(); _i < _j.length; _i++) {
-            var record = _j[_i];
+        for (var _i = 0, _c = records.reverse(); _i < _c.length; _i++) {
+            var record = _c[_i];
             if (record.addedNodes.length === 1) {
@@ -311,2 +382,9 @@ this.handleEnter(record.addedNodes[0], record, records.length - 1 - i);
             }
+            if (record.type === 'attributes' &&
+                record.attributeName &&
+                ['class', 'style'].includes(record.attributeName)) {
+                var el = record.target;
+                if (isHTMLElement(el))
+                    this.handleFlip(el);
+            }
             i++;
@@ -333,3 +411,3 @@ }
             var key;
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 key = el.__presenceKey;
@@ -347,3 +425,3 @@ // Remove existing elements with same key to handle HMR
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_j) {
+            return __generator(this, function (_c) {
                 this.descendants = this.descendants.filter(function (el) { return el.__presenceKey !== key; });
@@ -365,4 +443,4 @@ return [2 /*return*/];
             var _this = this;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
@@ -376,3 +454,3 @@ if (this.didExit || this.willExit)
                     case 1:
-                        _j.sent();
+                        _c.sent();
                         this.didExit = true;
@@ -394,4 +472,4 @@ this.willExit = false;
             var _this = this;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
@@ -405,6 +483,6 @@ this.didExit = false;
                     case 1:
-                        _j.sent();
+                        _c.sent();
                         return [4 /*yield*/, enterChildren(this.element)];
                     case 2:
-                        _j.sent();
+                        _c.sent();
                         this.didEnter = true;
@@ -411,0 +489,0 @@ this.willEnter = false;

dist/esm-es5/animated-route-switch.entry.js

@@ -39,3 +39,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import './presence-handler-a532ff81.js';
-import { a as exitChildren, e as enterChildren } from './index-3c9d6eb2.js';
+import { a as exitChildren, e as enterChildren } from './index-44ad04e8.js';
 /**
@@ -42,0 +42,0 @@ * TS adaption of https://github.com/pillarjs/path-to-regexp/blob/master/index.js

dist/esm/animate-presence.entry.js

 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './core-91d54087.js';
 import './presence-handler-a532ff81.js';
-import { c as closest, i as injectGlobalStyle, s as setCustomProperties, p as presence, e as enterChildren, a as exitChildren, b as isHTMLElement, h as hasData } from './index-3c9d6eb2.js';
+import { c as closest, i as injectGlobalStyle, h as hasData, g as getBounds, s as setCustomProperties, p as presence, e as enterChildren, a as exitChildren, b as isHTMLElement, d as getDelta } from './index-44ad04e8.js';
 
@@ -22,2 +22,4 @@ const hold = (el) => async (cb) => {
         this.descendants = [];
+        this.flipCache = new Map();
+        this.flip = false;
         this.getClosestParent = () => {
@@ -41,5 +43,7 @@ var _a;
             this.mo.observe(this.element, {
+                subtree: this.flip,
                 childList: true,
                 attributes: true,
-                attributeFilter: ['data-key'],
+                attributeOldValue: this.flip,
+                attributeFilter: this.flip ? ['data-key', 'class', 'style'] : undefined,
             });
@@ -52,3 +56,3 @@ }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b;
         injectGlobalStyle();
@@ -59,15 +63,11 @@ this.ancestor = this.getClosestParent();
         }
-        if (typeof this.orchestrate === 'undefined') {
-            this.orchestrate = (_d = (_c = this.ancestor) === null || _c === void 0 ? void 0 : _c.orchestrate, (_d !== null && _d !== void 0 ? _d : 'sequential'));
-        }
-        if (typeof this.orchestrateEnter === 'undefined') {
-            this.orchestrateEnter = (_f = (_e = this.ancestor) === null || _e === void 0 ? void 0 : _e.orchestrateEnter, (_f !== null && _f !== void 0 ? _f : this.orchestrate));
-        }
-        if (typeof this.orchestrateExit === 'undefined') {
-            this.orchestrateExit = (_h = (_g = this.ancestor) === null || _g === void 0 ? void 0 : _g.orchestrateExit, (_h !== null && _h !== void 0 ? _h : this.orchestrate));
-        }
         Array.from(this.element.children).map((el, i) => {
-            setCustomProperties(el, { i });
-            el.style.setProperty('animation-play-state', 'paused');
-            el.dataset.enter = '';
+            if (hasData(el, 'key')) {
+                this.flipCache.set(el.dataset.key, getBounds(el));
+            }
+            else {
+                setCustomProperties(el, { i });
+                el.style.setProperty('animation-play-state', 'paused');
+                el.dataset.enter = '';
+            }
         });
@@ -90,2 +90,5 @@ }
     async enterNode(el, i = 0) {
+        if (hasData(el, 'key')) {
+            return this.handleFlip(el);
+        }
         delete el.dataset.exit;
@@ -103,5 +106,4 @@ const event = new CustomEvent('animatePresenceEnter', {
         setCustomProperties(el, { i });
-        const enter = () => presence(el, {
+        await presence(el, {
             afterSelf: async () => {
-                delete el.dataset.initial;
                 delete el.dataset.enter;
@@ -111,44 +113,64 @@ el.style.removeProperty('--i');
         });
-        if (this.orchestrateEnter === 'sequential') {
-            await enter();
-            await enterChildren(el);
-        }
-        else if (this.orchestrateEnter === 'parallel') {
-            await Promise.all([enter(), enterChildren(el)]);
-        }
-        return Promise.resolve();
+        return enterChildren(el);
     }
     async exitNode(el, method = 'remove', i = 0) {
-        const exit = () => {
-            delete el.dataset.willExit;
-            setCustomProperties(el, { i });
-            const event = new CustomEvent('animatePresenceExit', {
-                bubbles: true,
-                detail: {
-                    i,
-                    hold: hold(el),
-                },
-            });
-            el.dispatchEvent(event);
-            el.dataset.exit = '';
-            return presence(el, {
-                afterSelf: () => {
-                    if (method === 'remove') {
-                        el.remove();
-                    }
-                    else if (method === 'hide') {
-                        el.style.setProperty('visibility', 'hidden');
-                    }
-                },
-            });
+        const handleEnd = () => {
+            if (method === 'remove') {
+                el.remove();
+            }
+            else if (method === 'hide') {
+                el.style.setProperty('visibility', 'hidden');
+            }
         };
-        if (this.orchestrateExit === 'sequential') {
-            await exitChildren(el);
-            await exit();
+        if (hasData(el, 'key')) {
+            this.flipCache.set(el.dataset.key, getBounds(el));
+            handleEnd();
+            return Promise.resolve();
         }
-        else if (this.orchestrateExit === 'parallel') {
-            await Promise.all([exitChildren(el), exit()]);
-        }
+        await exitChildren(el);
+        delete el.dataset.willExit;
+        setCustomProperties(el, { i });
+        const event = new CustomEvent('animatePresenceExit', {
+            bubbles: true,
+            detail: {
+                i,
+                hold: hold(el),
+            },
+        });
+        el.dispatchEvent(event);
+        el.dataset.exit = '';
+        await presence(el, {
+            afterSelf: handleEnd,
+        });
         return Promise.resolve();
     }
+    // private async flipNode(el: HTMLElement) {
+    //   if (hasData(el, 'flip')) return;
+    //   const prev = this.flipCache.get(el.dataset.key);
+    //   const curr = getStyle(el);
+    //   const initialStyle = el.getAttribute('style');
+    //   const diff = diffStyles(curr, prev);
+    //   if (Object.keys(diff).length > 0) {
+    //     for (const [key, { previous }] of Object.entries(diff)) {
+    //       el.style.setProperty(key, `${previous}`);
+    //     }
+    //     await Promise.resolve();
+    //     el.dataset.flip = '';
+    //     await presence(el, {
+    //       init: () => {
+    //         el.setAttribute('style', initialStyle);
+    //       },
+    //       afterSelf: () => {
+    //         delete el.dataset.flip;
+    //         this.flipCache.set(el.dataset.key, curr);
+    //       },
+    //       onCancel: () => {
+    //         this.flipCache.set(el.dataset.key, {});
+    //         delete el.dataset.flip;
+    //       },
+    //     });
+    //   } else {
+    //     this.flipCache.set(el.dataset.key, curr);
+    //   }
+    // }
     async handleEnter(node, _record, i) {
@@ -181,2 +203,39 @@ if (!isHTMLElement(node))
     }
+    async handleFlip(node) {
+        if (!isHTMLElement(node))
+            return;
+        if (!hasData(node, 'key'))
+            return;
+        const key = node.dataset.key;
+        if (hasData(node, 'flip'))
+            return;
+        const prev = this.flipCache.get(key);
+        const curr = getBounds(node);
+        if (prev.width === 0 && prev.height === 0) {
+            this.flipCache.set(key, curr);
+            return;
+        }
+        if (!hasData(node, 'willFlip')) {
+            const delta = getDelta(prev, curr);
+            console.log(delta);
+            node.dataset.willFlip = '';
+            node.style.setProperty('transform', `translate(${delta.left}px, ${delta.top}px) scale(${delta.width}, ${delta.height})`);
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            node.dataset.flip = '';
+            await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+            await presence(node, {
+                init: () => {
+                    node.style.removeProperty('transform');
+                    delete node.dataset.willFlip;
+                },
+                afterSelf: async () => {
+                    this.flipCache.set(key, curr);
+                    delete node.dataset.flip;
+                },
+                onCancel() {
+                    node.dataset.flip = 'continue';
+                },
+            });
+        }
+    }
     handleMutation(records) {
@@ -191,2 +250,9 @@ let i = 0;
             }
+            if (record.type === 'attributes' &&
+                record.attributeName &&
+                ['class', 'style'].includes(record.attributeName)) {
+                const el = record.target;
+                if (isHTMLElement(el))
+                    this.handleFlip(el);
+            }
             i++;
@@ -193,0 +259,0 @@ }

dist/esm/animated-route-switch.entry.js

 import { r as registerInstance, d as getContext, h, g as getElement } from './core-91d54087.js';
 import './presence-handler-a532ff81.js';
-import { a as exitChildren, e as enterChildren } from './index-3c9d6eb2.js';
+import { a as exitChildren, e as enterChildren } from './index-44ad04e8.js';
 
@@ -5,0 +5,0 @@ /**

dist/types/components.d.ts

@@ -26,2 +26,3 @@ /* eslint-disable */
     'exit': () => Promise<void>;
+    'flip': boolean;
     /**
@@ -31,8 +32,2 @@ * If `true` (default), a MutationObserver will automatically be connected to enable animations when a child node enters/exits.  If you know the children are static (typical `animated-route-switch` use case), `false` may improve performance.  Note: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,  which means MutationObservers can be disabled for the entire tree by setting `observe={false}` on the top-level element.  However, directly set values always take precedence over inherited values.
     'observe': boolean;
-    /**
-    * Changes the behavior of nested `<animate-presence>` elements.  `sequential` (default) will enter from the top-down and exit from the bottom-up.  `parallel` will trigger all entrances and exits in parallel  Note: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,
-    */
-    'orchestrate': 'sequential' | 'parallel';
-    'orchestrateEnter': 'sequential' | 'parallel';
-    'orchestrateExit': 'sequential' | 'parallel';
     'registerChild': (el: HTMLAnimatePresenceElement) => Promise<void>;
@@ -71,2 +66,3 @@ 'unregisterChild': (key: string) => Promise<void>;
   interface AnimatePresence {
+    'flip'?: boolean;
     /**
@@ -88,8 +84,2 @@ * If `true` (default), a MutationObserver will automatically be connected to enable animations when a child node enters/exits.  If you know the children are static (typical `animated-route-switch` use case), `false` may improve performance.  Note: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,  which means MutationObservers can be disabled for the entire tree by setting `observe={false}` on the top-level element.  However, directly set values always take precedence over inherited values.
     'onAnimatePresenceExitComplete'?: (event: CustomEvent<void>) => void;
-    /**
-    * Changes the behavior of nested `<animate-presence>` elements.  `sequential` (default) will enter from the top-down and exit from the bottom-up.  `parallel` will trigger all entrances and exits in parallel  Note: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,
-    */
-    'orchestrate'?: 'sequential' | 'parallel';
-    'orchestrateEnter'?: 'sequential' | 'parallel';
-    'orchestrateExit'?: 'sequential' | 'parallel';
   }
@@ -96,0 +86,0 @@ interface AnimatedRouteSwitch {

dist/types/components/animate-presence/animate-presence.d.ts

@@ -9,2 +9,4 @@ import { EventEmitter } from '../../stencil.core';
     private ancestor;
+    private flipCache;
+    flip: boolean;
     /**
@@ -22,14 +24,2 @@ * If `true` (default), a MutationObserver will automatically be connected to enable animations when a child node enters/exits.
     observe: boolean;
-    /**
-     * Changes the behavior of nested `<animate-presence>` elements.
-     *
-     * `sequential` (default) will enter from the top-down and exit from the bottom-up.
-     *
-     * `parallel` will trigger all entrances and exits in parallel
-     *
-     * Note: `<animate-presence>` elements which are children of a parent `<animate-presence>` element will inherit this value,
-     */
-    orchestrate: 'sequential' | 'parallel';
-    orchestrateEnter: 'sequential' | 'parallel';
-    orchestrateExit: 'sequential' | 'parallel';
     observeChanged(): void;
@@ -46,2 +36,3 @@ private mo;
     private handleExit;
+    private handleFlip;
     private handleMutation;
@@ -48,0 +39,0 @@ private addMO;

dist/types/utils/index.d.ts

 export * from './presence-handler';
+export * from './flip';
 export declare const nextTick: (cb: () => void) => Promise<void>;
 export declare const presence: (element: HTMLElement, hooks?: {
+    init?: () => void;
     afterSelf?: () => void;
+    onCancel?: () => void;
 }) => Promise<unknown>;
+export declare const kebab: (str: string) => string;
 export declare const setCustomProperties: (el: HTMLElement, props?: Record<string | number, string | number | boolean>) => void;
@@ -7,0 +11,0 @@ export declare const isHTMLElement: (node: Node) => node is HTMLElement;

package.json

 {
   "name": "animate-presence",
-  "version": "0.0.0-5a2454a",
+  "version": "0.0.0-b119969",
   "description": "Effortless element entrance/exit animations",
@@ -25,2 +25,3 @@ "main": "dist/index.js",
     "@stencil/core": "^1.8.8",
+    "flipping": "^1.1.0",
     "workbox-build": "4.3.1"
@@ -27,0 +28,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

1067629

14.41%

Number of package files

88

2.33%

Lines of code

19009

20.84%

Worsened metrics

Dev dependency count

3

50%

No dependency changes