react-dip/dist/react-dip.umd.min.js

Simple & declarative transition animations for React

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactDip=t(e.React)}(this,function(e){"use strict";var t="default"in e?e.default:e;function n(e,t){return t.reduce(function(t,n){return e.hasOwnProperty(n)&&(t[n]=e[n]),t},{})}var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};var a=function(e){function a(){var t,n;o(this,a);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return t=n=r(this,e.call.apply(e,[this].concat(s))),n.startNodeValues=a.getStartNodeValues(n.props.dipId),n.appendAnimationRef=function(e){n.animationElement=e;var t=a.animationLayer;t&&t.appendChild(e)},n.removeAnimationRef=function(){n.animationElement&&n.animationElement.parentNode&&a.animationLayer&&a.animationLayer.removeChild(n.animationElement),n.animationElement=void 0},n.addRef=function(e){n.ref=e,null!=e&&a.registerStartNode(n.props.dipId,e)},n.logWarnings=function(){var e=n.props,t=e.dipId,o=e.element,i=e.render;null==t&&console.error("please specify a `dipId`-Prop. Otherwise you won't see any or unexcpected animations. See https://github.com/mdugue/react-dip"),null!=i&&null!=o&&console.warn("the `element`-Prop will be ignored as you specified a `render`-Prop. See https://github.com/mdugue/react-dip")},r(n,t)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(a,e),a.prototype.componentDidMount=function(){var e=this,t=this.ref,o=this.startNodeValues;if(null!=t&&null!=o){var r,a,s,l=this.props,d=l.easing,u=void 0===d?"ease-out":d,p=l.duration,c=void 0===p?200:p,f=l.optInCssStyles,m=void 0===f?[]:f,y=(a=(r=t).getBoundingClientRect(),(s=r.cloneNode(!0)).style.position="absolute",s.style.width=a.width+"px",s.style.height=a.height+"px",s.style.top=window.scrollY+a.top+"px",s.style.left=window.scrollX+a.left+"px",s.style.transformOrigin="left top",s.style.margin="0",s.style.backfaceVisibility="hidden",{element:s,rect:a}),h=y.element,g=y.rect;this.appendAnimationRef(h);var v=function(e,t){return{xFrom:e.left-t.left,yFrom:e.top-t.top,xTo:0,yTo:0,scaleFromX:e.width/t.width,scaleFromY:e.height/t.height}}(o.rect,g),b=function(e,t,o){return{styleStart:n(e,o),styleDestination:n(t,o)}}(o.computedStyle,getComputedStyle(t),m);t.style.visibility="hidden",function(e,t,n,o,r){var a=t.styleStart,s=t.styleDestination,l=n.xFrom,d=n.yFrom,u=n.scaleFromX,p=n.scaleFromY,c=n.xTo,f=n.yTo;return"animate"in e?new Promise(function(t){e.animate([i({},a,{transform:"translate3d("+l+"px, "+d+"px, 0) scale3d("+u+", "+p+", 1)"}),i({},s,{transform:"translate3d("+c+"px, "+f+"px, 0)"})],{duration:o,easing:r,fill:"both"}).onfinish=function(){t()}}):new Promise(function(e,t){return t(new Error("web animations are not supported by this platform"))})}(h,b,v,c,u).then(function(){t.style.visibility="visible",e.removeAnimationRef()})}},a.prototype.componentWillUnmount=function(){a.unregisterStartNode(this.props.dipId,this.ref),this.removeAnimationRef(),window.cancelAnimationFrame(this.rafId)},a.prototype.render=function(){var e=this.props,n=e.children,o=(e.dipId,e.duration,e.element),r=void 0===o?"div":o,a=(e.optInCssStyles,e.render),s=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}(e,["children","dipId","duration","element","optInCssStyles","render"]);return this.logWarnings(),null!=a?a(i({},s,{ref:this.addRef})):t.createElement(r,i({},s,{ref:this.addRef}),n)},a}(e.Component);return a.animationLayer=function(){if("undefined"!=typeof document){var e=document.createElement("div");return e.id="dip-animations",e.style.cssText="position: absolute; top: 0; left: 0; pointer-events: none; backfaceVisibilty: hidden;",document.body&&document.body.appendChild(e),e}}(),a.registeredNodes={},a.unregisterStartNode=function(e,t){a.registeredNodes[e]===t&&delete a.registeredNodes[e]},a.registerStartNode=function(e,t){return a.registeredNodes[e]=t},a.getStartNodeValues=function(e){var t=a.registeredNodes[e];if(t){var n=getComputedStyle(t);return{rect:t.getBoundingClientRect(),computedStyle:i({},n)}}},a});
//# sourceMappingURL=react-dip.umd.min.js.map