@animxyz/react - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

dist/ReactAnimXyz.cjs.js

 /**
-   * ReactAnimXyz v0.0.21
+   * ReactAnimXyz v0.0.22
    * Copyright (c) 2020-present Ingram Projects
@@ -12,10 +12,13 @@ * Released under the MIT License.
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 var reactTransitionGroup = require('react-transition-group');
-var clsx = _interopDefault(require('clsx'));
+var clsx = require('clsx');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
 function _extends() {
@@ -67,2 +70,18 @@ _extends = Object.assign || function (target) {
 
+function getXyzElementMode(el) {
+  if (el.classList.contains('xyz-appear')) {
+    return 'appear';
+  }
+
+  if (el.classList.contains('xyz-in')) {
+    return 'in';
+  }
+
+  if (el.classList.contains('xyz-out')) {
+    return 'out';
+  }
+
+  return null;
+}
+
 function getXyzTimeoutForMode(mode, timeout) {
@@ -87,51 +106,57 @@ if (typeof timeout !== 'object' || timeout === null) {
 
-function clearXyzProperties(el) {
+function clearXyzElementProperties(el) {
   clearTimeout(el.xyzAnimTimeout);
+  el.removeEventListener('animationend', el.xyzAnimEnd);
+  el.removeEventListener('animationcancelled', el.xyzAnimEnd);
   delete el.xyzAnimTimeout;
-  el.removeEventListener('animationend', el.xyzAnimDone);
-  delete el.xyzAnimDone;
+  delete el.xyzAnimEnd;
 }
 
-function getXyzAnimationActiveHook(timeout) {
+function getXyzAnimationHook(timeout) {
   return function (el, done) {
-    clearXyzProperties(el);
-    var mode;
+    clearXyzElementProperties(el);
 
-    if (el.classList.contains('xyz-appear')) {
-      mode = 'appear';
-    } else if (el.classList.contains('xyz-in')) {
-      mode = 'in';
-    } else if (el.classList.contains('xyz-out')) {
-      mode = 'out';
+    function xyzAnimDone() {
+      done();
+      clearXyzElementProperties(el);
     }
 
+    var mode = getXyzElementMode(el);
     var modeTimeout = getXyzTimeoutForMode(mode, timeout);
 
     if (typeof modeTimeout === 'number') {
-      el.xyzAnimTimeout = setTimeout(done, modeTimeout);
-    } else if (modeTimeout === 'auto') {
-      var nestedEls = el.querySelectorAll((".xyz-nested, .xyz-" + mode + "-nested"));
-      var visibleNestedEls = Array.from(nestedEls).filter(function (nestedEl) {
-        return nestedEl.offsetParent !== null;
-      });
-      var animatingElsSet = new Set([el ].concat( visibleNestedEls));
+      el.xyzAnimTimeout = setTimeout(xyzAnimDone, modeTimeout);
+      return;
+    }
 
-      el.xyzAnimDone = function (event) {
-        animatingElsSet.delete(event.target);
+    var xyzModeKeyframes = "xyz-" + mode + "-keyframes";
+    var xyzEls = [el];
 
-        if (animatingElsSet.size === 0) {
-          done();
-        }
-      };
+    if (modeTimeout === 'auto') {
+      var xyzNestedEls = el.querySelectorAll((".xyz-nested, .xyz-" + mode + "-nested"));
+      xyzEls.push.apply(xyzEls, Array.from(xyzNestedEls));
+    }
 
-      el.addEventListener('animationend', el.xyzAnimDone, false);
-    } else {
-      el.xyzAnimDone = function (event) {
-        if (event.target === el) {
-          done();
+    var xyzActiveEls = xyzEls.filter(function (xyzEl) {
+      // If element is invisible
+      if (xyzEl.offsetParent === null) { return false; } // If element isn't animating
+
+      var animationName = window.getComputedStyle(xyzEl).getPropertyValue('animation-name');
+      if (animationName.indexOf(xyzModeKeyframes) === -1) { return false; }
+      return true;
+    });
+    var xyzActiveElsSet = new Set(xyzActiveEls);
+
+    el.xyzAnimEnd = function (event) {
+      if (event.animationName === xyzModeKeyframes) {
+        xyzActiveElsSet.delete(event.target);
+
+        if (xyzActiveElsSet.size === 0) {
+          xyzAnimDone();
         }
-      };
+      }
+    };
 
-      el.addEventListener('animationend', el.xyzAnimDone, false);
-    }
+    el.addEventListener('animationend', el.xyzAnimEnd, false);
+    el.addEventListener('animationcancelled', el.xyzAnimEnd, false);
   };
@@ -141,2 +166,4 @@ }
 function getXyzTransitionProps(props) {
+  var ref = props || {};
+  var timeout = ref.timeout;
   var classNames = {
@@ -153,4 +180,3 @@ appear: xyzTransitionClasses.appearFrom,
   };
-  var timeout = props.timeout;
-  var addEndListener = getXyzAnimationActiveHook(timeout);
+  var addEndListener = getXyzAnimationHook(timeout);
   var mergedProps = Object.assign({}, props, {
@@ -177,3 +203,3 @@ classNames: Object.assign({}, classNames, props.classNames),
   var child = childArray[0];
-  return /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, xyzTransitionProps, React.cloneElement(child, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, xyzTransitionProps, React.cloneElement(child, Object.assign({
     xyz: xyz
@@ -184,9 +210,9 @@ }, child.props)));
 XyzTransition.propTypes = Object.assign({}, reactTransitionGroup.CSSTransition.propTypes, {
-  xyz: PropTypes.string,
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto']), PropTypes.shape({
-    appear: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
-    enter: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
-    exit: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])])
+  xyz: PropTypes__default['default'].string,
+  timeout: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].oneOf(['auto']), PropTypes__default['default'].shape({
+    appear: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].oneOf(['auto'])]),
+    enter: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].oneOf(['auto'])]),
+    exit: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].oneOf(['auto'])])
   })]),
-  children: PropTypes.node
+  children: PropTypes__default['default'].node
 });
@@ -202,7 +228,7 @@
   var childArray = React.Children.toArray(children).filter(Boolean);
-  return /*#__PURE__*/React__default.createElement(reactTransitionGroup.TransitionGroup, {
+  return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, {
     xyz: xyz,
     component: component,
     childFactory: childFactory
-  }, childArray.map(function (child, index) { return React__default.createElement(XyzTransition, _extends({}, rest, {
+  }, childArray.map(function (child, index) { return React__default['default'].createElement(XyzTransition, _extends({}, rest, {
     key: child.key
@@ -231,5 +257,5 @@ }), React.cloneElement(child, {
   var child = childArray[0];
-  return /*#__PURE__*/React__default.createElement(reactTransitionGroup.SwitchTransition, {
+  return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.SwitchTransition, {
     mode: mode
-  }, /*#__PURE__*/React__default.createElement(XyzTransition, _extends({}, rest, {
+  }, /*#__PURE__*/React__default['default'].createElement(XyzTransition, _extends({}, rest, {
     key: child.key
@@ -241,5 +267,10 @@ }), child));
 
-exports.xyz = clsx;
+Object.defineProperty(exports, 'xyz', {
+  enumerable: true,
+  get: function () {
+    return clsx__default['default'];
+  }
+});
 exports.XyzTransition = XyzTransition;
 exports.XyzTransitionGroup = XyzTransitionGroup;
 exports.XyzTransitionSwitch = XyzTransitionSwitch;

dist/ReactAnimXyz.esm.js

 /**
-   * ReactAnimXyz v0.0.21
+   * ReactAnimXyz v0.0.22
    * Copyright (c) 2020-present Ingram Projects
@@ -59,2 +59,18 @@ * Released under the MIT License.
 
+function getXyzElementMode(el) {
+  if (el.classList.contains('xyz-appear')) {
+    return 'appear';
+  }
+
+  if (el.classList.contains('xyz-in')) {
+    return 'in';
+  }
+
+  if (el.classList.contains('xyz-out')) {
+    return 'out';
+  }
+
+  return null;
+}
+
 function getXyzTimeoutForMode(mode, timeout) {
@@ -79,51 +95,57 @@ if (typeof timeout !== 'object' || timeout === null) {
 
-function clearXyzProperties(el) {
+function clearXyzElementProperties(el) {
   clearTimeout(el.xyzAnimTimeout);
+  el.removeEventListener('animationend', el.xyzAnimEnd);
+  el.removeEventListener('animationcancelled', el.xyzAnimEnd);
   delete el.xyzAnimTimeout;
-  el.removeEventListener('animationend', el.xyzAnimDone);
-  delete el.xyzAnimDone;
+  delete el.xyzAnimEnd;
 }
 
-function getXyzAnimationActiveHook(timeout) {
+function getXyzAnimationHook(timeout) {
   return function (el, done) {
-    clearXyzProperties(el);
-    var mode;
+    clearXyzElementProperties(el);
 
-    if (el.classList.contains('xyz-appear')) {
-      mode = 'appear';
-    } else if (el.classList.contains('xyz-in')) {
-      mode = 'in';
-    } else if (el.classList.contains('xyz-out')) {
-      mode = 'out';
+    function xyzAnimDone() {
+      done();
+      clearXyzElementProperties(el);
     }
 
+    var mode = getXyzElementMode(el);
     var modeTimeout = getXyzTimeoutForMode(mode, timeout);
 
     if (typeof modeTimeout === 'number') {
-      el.xyzAnimTimeout = setTimeout(done, modeTimeout);
-    } else if (modeTimeout === 'auto') {
-      var nestedEls = el.querySelectorAll((".xyz-nested, .xyz-" + mode + "-nested"));
-      var visibleNestedEls = Array.from(nestedEls).filter(function (nestedEl) {
-        return nestedEl.offsetParent !== null;
-      });
-      var animatingElsSet = new Set([el ].concat( visibleNestedEls));
+      el.xyzAnimTimeout = setTimeout(xyzAnimDone, modeTimeout);
+      return;
+    }
 
-      el.xyzAnimDone = function (event) {
-        animatingElsSet.delete(event.target);
+    var xyzModeKeyframes = "xyz-" + mode + "-keyframes";
+    var xyzEls = [el];
 
-        if (animatingElsSet.size === 0) {
-          done();
-        }
-      };
+    if (modeTimeout === 'auto') {
+      var xyzNestedEls = el.querySelectorAll((".xyz-nested, .xyz-" + mode + "-nested"));
+      xyzEls.push.apply(xyzEls, Array.from(xyzNestedEls));
+    }
 
-      el.addEventListener('animationend', el.xyzAnimDone, false);
-    } else {
-      el.xyzAnimDone = function (event) {
-        if (event.target === el) {
-          done();
+    var xyzActiveEls = xyzEls.filter(function (xyzEl) {
+      // If element is invisible
+      if (xyzEl.offsetParent === null) { return false; } // If element isn't animating
+
+      var animationName = window.getComputedStyle(xyzEl).getPropertyValue('animation-name');
+      if (animationName.indexOf(xyzModeKeyframes) === -1) { return false; }
+      return true;
+    });
+    var xyzActiveElsSet = new Set(xyzActiveEls);
+
+    el.xyzAnimEnd = function (event) {
+      if (event.animationName === xyzModeKeyframes) {
+        xyzActiveElsSet.delete(event.target);
+
+        if (xyzActiveElsSet.size === 0) {
+          xyzAnimDone();
         }
-      };
+      }
+    };
 
-      el.addEventListener('animationend', el.xyzAnimDone, false);
-    }
+    el.addEventListener('animationend', el.xyzAnimEnd, false);
+    el.addEventListener('animationcancelled', el.xyzAnimEnd, false);
   };
@@ -133,2 +155,4 @@ }
 function getXyzTransitionProps(props) {
+  var ref = props || {};
+  var timeout = ref.timeout;
   var classNames = {
@@ -145,4 +169,3 @@ appear: xyzTransitionClasses.appearFrom,
   };
-  var timeout = props.timeout;
-  var addEndListener = getXyzAnimationActiveHook(timeout);
+  var addEndListener = getXyzAnimationHook(timeout);
   var mergedProps = Object.assign({}, props, {
@@ -149,0 +172,0 @@ classNames: Object.assign({}, classNames, props.classNames),

dist/ReactAnimXyz.js

 /**
-   * ReactAnimXyz v0.0.21
+   * ReactAnimXyz v0.0.22
    * Copyright (c) 2020-present Ingram Projects
@@ -9,3 +9,3 @@ * Released under the MIT License.
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-transition-group"),require("clsx")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-transition-group","clsx"],t):t((e=e||self).ReactAnimXyz={},e.React,e.PropTypes,e.reactTransitionGroup,e.clsx)}(this,(function(e,t,n,r,o){"use strict";var i="default"in t?t.default:t;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var c="xyz-appear-from",p="xyz-appear",u="xyz-appear-to",l="xyz-in-from",y="xyz-in",f="xyz-in-to",d="xyz-out-from",m="xyz-out",x="xyz-out-to";function z(e){return function(t,n){var r;!function(e){clearTimeout(e.xyzAnimTimeout),delete e.xyzAnimTimeout,e.removeEventListener("animationend",e.xyzAnimDone),delete e.xyzAnimDone}(t),t.classList.contains("xyz-appear")?r="appear":t.classList.contains("xyz-in")?r="in":t.classList.contains("xyz-out")&&(r="out");var o=function(e,t){if("object"!=typeof t||null===t)return t;switch(e){case"appear":return t.appear;case"in":return t.enter;case"out":return t.exit}return null}(r,e);if("number"==typeof o)t.xyzAnimTimeout=setTimeout(n,o);else if("auto"===o){var i=t.querySelectorAll(".xyz-nested, .xyz-"+r+"-nested"),a=Array.from(i).filter((function(e){return null!==e.offsetParent})),s=new Set([t].concat(a));t.xyzAnimDone=function(e){s.delete(e.target),0===s.size&&n()},t.addEventListener("animationend",t.xyzAnimDone,!1)}else t.xyzAnimDone=function(e){e.target===t&&n()},t.addEventListener("animationend",t.xyzAnimDone,!1)}}function h(e){var n=e.xyz,o=e.children,a=function(e){var t={appear:c,appearActive:p,appearDone:u,enter:l,enterActive:y,enterDone:f,exit:d,exitActive:m,exitDone:x},n=z(e.timeout),r=Object.assign({},e,{classNames:Object.assign({},t,e.classNames),addEndListener:n});return delete r.timeout,r}(s(e,["xyz","children"])),h=t.Children.toArray(o).filter(Boolean);if(1!==h.length)throw new Error("XyzTransition must have a single truthy child at all times");var T=h[0];return i.createElement(r.CSSTransition,a,t.cloneElement(T,Object.assign({xyz:n},T.props)))}function T(e){var n=e.xyz,o=e.component,c=e.childFactory,p=e.children,u=s(e,["xyz","component","childFactory","children"]),l=t.Children.toArray(p).filter(Boolean);return i.createElement(r.TransitionGroup,{xyz:n,component:o,childFactory:c},l.map((function(e,n){return i.createElement(h,a({},u,{key:e.key}),t.cloneElement(e,{style:Object.assign({"--xyz-index":n,"--xyz-index-rev":l.length-n-1},e.style)}))})))}function v(e){var n=e.mode,o=e.children,c=s(e,["mode","children"]),p=t.Children.toArray(o).filter(Boolean);if(1!==p.length)throw new Error("XyzTransitionSwitch must have a single truthy child at all times");var u=p[0];return i.createElement(r.SwitchTransition,{mode:n},i.createElement(h,a({},c,{key:u.key}),u))}h.propTypes=Object.assign({},r.CSSTransition.propTypes,{xyz:n.string,timeout:n.oneOfType([n.number,n.oneOf(["auto"]),n.shape({appear:n.oneOfType([n.number,n.oneOf(["auto"])]),enter:n.oneOfType([n.number,n.oneOf(["auto"])]),exit:n.oneOfType([n.number,n.oneOf(["auto"])])})]),children:n.node}),T.propTypes=Object.assign({},r.TransitionGroup.propTypes,h.propTypes),v.propTypes=Object.assign({},r.SwitchTransition.propTypes,h.propTypes),e.xyz=o,e.XyzTransition=h,e.XyzTransitionGroup=T,e.XyzTransitionSwitch=v,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-transition-group"),require("clsx")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-transition-group","clsx"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactAnimXyz={},e.React,e.PropTypes,e.reactTransitionGroup,e.clsx)}(this,(function(e,t,n,r,i){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t),u=a(n),l=a(i);function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}var p="xyz-appear-from",f="xyz-appear",y="xyz-appear-to",d="xyz-in-from",m="xyz-in",x="xyz-in-to",z="xyz-out-from",h="xyz-out",T="xyz-out-to";function v(e){clearTimeout(e.xyzAnimTimeout),e.removeEventListener("animationend",e.xyzAnimEnd),e.removeEventListener("animationcancelled",e.xyzAnimEnd),delete e.xyzAnimTimeout,delete e.xyzAnimEnd}function g(e){var t=(e||{}).timeout,n={appear:p,appearActive:f,appearDone:y,enter:d,enterActive:m,enterDone:x,exit:z,exitActive:h,exitDone:T},r=function(e){return function(t,n){function r(){n(),v(t)}v(t);var i=function(e){return e.classList.contains("xyz-appear")?"appear":e.classList.contains("xyz-in")?"in":e.classList.contains("xyz-out")?"out":null}(t),a=function(e,t){if("object"!=typeof t||null===t)return t;switch(e){case"appear":return t.appear;case"in":return t.enter;case"out":return t.exit}return null}(i,e);if("number"!=typeof a){var o="xyz-"+i+"-keyframes",u=[t];if("auto"===a){var l=t.querySelectorAll(".xyz-nested, .xyz-"+i+"-nested");u.push.apply(u,Array.from(l))}var s=u.filter((function(e){return null!==e.offsetParent&&-1!==window.getComputedStyle(e).getPropertyValue("animation-name").indexOf(o)})),c=new Set(s);t.xyzAnimEnd=function(e){e.animationName===o&&(c.delete(e.target),0===c.size&&r())},t.addEventListener("animationend",t.xyzAnimEnd,!1),t.addEventListener("animationcancelled",t.xyzAnimEnd,!1)}else t.xyzAnimTimeout=setTimeout(r,a)}}(t),i=Object.assign({},e,{classNames:Object.assign({},n,e.classNames),addEndListener:r});return delete i.timeout,i}function b(e){var n=e.xyz,i=e.children,a=g(c(e,["xyz","children"])),u=t.Children.toArray(i).filter(Boolean);if(1!==u.length)throw new Error("XyzTransition must have a single truthy child at all times");var l=u[0];return o.default.createElement(r.CSSTransition,a,t.cloneElement(l,Object.assign({xyz:n},l.props)))}function O(e){var n=e.xyz,i=e.component,a=e.childFactory,u=e.children,l=c(e,["xyz","component","childFactory","children"]),p=t.Children.toArray(u).filter(Boolean);return o.default.createElement(r.TransitionGroup,{xyz:n,component:i,childFactory:a},p.map((function(e,n){return o.default.createElement(b,s({},l,{key:e.key}),t.cloneElement(e,{style:Object.assign({"--xyz-index":n,"--xyz-index-rev":p.length-n-1},e.style)}))})))}function E(e){var n=e.mode,i=e.children,a=c(e,["mode","children"]),u=t.Children.toArray(i).filter(Boolean);if(1!==u.length)throw new Error("XyzTransitionSwitch must have a single truthy child at all times");var l=u[0];return o.default.createElement(r.SwitchTransition,{mode:n},o.default.createElement(b,s({},a,{key:l.key}),l))}b.propTypes=Object.assign({},r.CSSTransition.propTypes,{xyz:u.default.string,timeout:u.default.oneOfType([u.default.number,u.default.oneOf(["auto"]),u.default.shape({appear:u.default.oneOfType([u.default.number,u.default.oneOf(["auto"])]),enter:u.default.oneOfType([u.default.number,u.default.oneOf(["auto"])]),exit:u.default.oneOfType([u.default.number,u.default.oneOf(["auto"])])})]),children:u.default.node}),O.propTypes=Object.assign({},r.TransitionGroup.propTypes,b.propTypes),E.propTypes=Object.assign({},r.SwitchTransition.propTypes,b.propTypes),Object.defineProperty(e,"xyz",{enumerable:!0,get:function(){return l.default}}),e.XyzTransition=b,e.XyzTransitionGroup=O,e.XyzTransitionSwitch=E,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ReactAnimXyz.js.map

package.json

 {
   "name": "@animxyz/react",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "publishConfig": {
@@ -17,3 +17,3 @@ "access": "public"
   "homepage": "https://animxyz.com",
-  "author": "Ingram Projects (https://github.com/milesingrams/animxyz/graphs/contributors)",
+  "author": "Ingram Projects (https://github.com/ingram-projects/animxyz/graphs/contributors)",
   "contributors": [
@@ -25,7 +25,7 @@ "Miles Ingram <[e-mail]> (https://milesingram.me/)",
     "type": "git",
-    "url": "git+https://github.com/milesingrams/animxyz.git",
+    "url": "git+https://github.com/ingram-projects/animxyz.git",
     "directory": "packages/react"
   },
   "bugs": {
-    "url": "https://github.com/milesingrams/animxyz/issues"
+    "url": "https://github.com/ingram-projects/animxyz/issues"
   },
@@ -49,3 +49,3 @@ "license": "MIT",
   "dependencies": {
-    "@animxyz/core": "^0.0.22",
+    "@animxyz/core": "^0.0.23",
     "clsx": "^1.1.1",
@@ -56,3 +56,3 @@ "prop-types": "^15.7.2",
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": "^16.14.0"
   },
@@ -62,7 +62,7 @@ "devDependencies": {
     "bili": "^5.0.5",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react": "^7.21.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2"
   },
-  "gitHead": "59c9c6a1e9325103a69401ff2fd2823da2568be8"
+  "gitHead": "81c8911bf3dfdf30a0c90f906c436e931409ce78"
 }

src/xyzUtils.js

@@ -16,2 +16,15 @@ export { default as xyz } from 'clsx'
 
+function getXyzElementMode(el) {
+	if (el.classList.contains('xyz-appear')) {
+		return 'appear'
+	}
+	if (el.classList.contains('xyz-in')) {
+		return 'in'
+	}
+	if (el.classList.contains('xyz-out')) {
+		return 'out'
+	}
+	return null
+}
+
 function getXyzTimeoutForMode(mode, timeout) {
@@ -32,49 +45,60 @@ if (typeof timeout !== 'object' || timeout === null) {
 
-function clearXyzProperties(el) {
+function clearXyzElementProperties(el) {
 	clearTimeout(el.xyzAnimTimeout)
+	el.removeEventListener('animationend', el.xyzAnimEnd)
+	el.removeEventListener('animationcancelled', el.xyzAnimEnd)
+
 	delete el.xyzAnimTimeout
-
-	el.removeEventListener('animationend', el.xyzAnimDone)
-	delete el.xyzAnimDone
+	delete el.xyzAnimEnd
 }
 
-function getXyzAnimationActiveHook(timeout) {
+function getXyzAnimationHook(timeout) {
 	return (el, done) => {
-		clearXyzProperties(el)
+		clearXyzElementProperties(el)
 
-		let mode
-		if (el.classList.contains('xyz-appear')) {
-			mode = 'appear'
-		} else if (el.classList.contains('xyz-in')) {
-			mode = 'in'
-		} else if (el.classList.contains('xyz-out')) {
-			mode = 'out'
+		function xyzAnimDone() {
+			done()
+			clearXyzElementProperties(el)
 		}
 
+		const mode = getXyzElementMode(el)
 		const modeTimeout = getXyzTimeoutForMode(mode, timeout)
 
 		if (typeof modeTimeout === 'number') {
-			el.xyzAnimTimeout = setTimeout(done, modeTimeout)
-		} else if (modeTimeout === 'auto') {
-			const nestedEls = el.querySelectorAll(`.xyz-nested, .xyz-${mode}-nested`)
-			const visibleNestedEls = Array.from(nestedEls).filter((nestedEl) => {
-				return nestedEl.offsetParent !== null
-			})
+			el.xyzAnimTimeout = setTimeout(xyzAnimDone, modeTimeout)
+			return
+		}
 
-			const animatingElsSet = new Set([el, ...visibleNestedEls])
-			el.xyzAnimDone = (event) => {
-				animatingElsSet.delete(event.target)
-				if (animatingElsSet.size === 0) {
-					done()
+		const xyzModeKeyframes = `xyz-${mode}-keyframes`
+		const xyzEls = [el]
+
+		if (modeTimeout === 'auto') {
+			const xyzNestedEls = el.querySelectorAll(`.xyz-nested, .xyz-${mode}-nested`)
+			xyzEls.push(...Array.from(xyzNestedEls))
+		}
+
+		const xyzActiveEls = xyzEls.filter((xyzEl) => {
+			// If element is invisible
+			if (xyzEl.offsetParent === null) return false
+
+			// If element isn't animating
+			const animationName = window.getComputedStyle(xyzEl).getPropertyValue('animation-name')
+			if (animationName.indexOf(xyzModeKeyframes) === -1) return false
+
+			return true
+		})
+
+		const xyzActiveElsSet = new Set(xyzActiveEls)
+
+		el.xyzAnimEnd = (event) => {
+			if (event.animationName === xyzModeKeyframes) {
+				xyzActiveElsSet.delete(event.target)
+				if (xyzActiveElsSet.size === 0) {
+					xyzAnimDone()
 				}
 			}
-			el.addEventListener('animationend', el.xyzAnimDone, false)
-		} else {
-			el.xyzAnimDone = (event) => {
-				if (event.target === el) {
-					done()
-				}
-			}
-			el.addEventListener('animationend', el.xyzAnimDone, false)
 		}
+
+		el.addEventListener('animationend', el.xyzAnimEnd, false)
+		el.addEventListener('animationcancelled', el.xyzAnimEnd, false)
 	}
@@ -84,2 +108,4 @@ }
 export function getXyzTransitionProps(props) {
+	const { timeout } = props || {}
+
 	const classNames = {
@@ -97,4 +123,3 @@ appear: xyzTransitionClasses.appearFrom,
 
-	const { timeout } = props
-	const addEndListener = getXyzAnimationActiveHook(timeout)
+	const addEndListener = getXyzAnimationHook(timeout)
 
@@ -109,2 +134,3 @@ const mergedProps = {
 	}
+
 	delete mergedProps.timeout
@@ -111,0 +137,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32499

increased by10.06%

Lines of code

638

increased by9.81%

Dependency changes

• + Added@animxyz/core@0.0.23(transitive)

• - Removed@animxyz/core@0.0.22(transitive)

• Updated@animxyz/core@^0.0.23