react-fade-animation/lib/FadeAnimation.js

Animate elements in react without any external dependece.

module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=i(n(1)),o=i(n(2));function i(e){return e&&e.__esModule?e:{default:e}}n(5);var s={duration:o.default.number,delay:o.default.number,selector:o.default.string,selectAll:o.default.bool,from:o.default.string,startDistance:o.default.number},c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=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}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.mainContainer=a.default.createRef(),n}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)}(t,a.default.Component),r(t,[{key:"componentDidMount",value:function(){var e=this,t=this.props.delay;t>0?setTimeout(function(){e.executeAnimation()},1e3*t):this.executeAnimation()}},{key:"executeAnimation",value:function(){var e=this,t=this.props,n=t.duration,r=t.from,a=t.startDistance,o=t.selector,i=t.selectAll;this.mainContainer.current.style.setProperty("--fade-animation-duration",n+"s"),this.mainContainer.current.style.setProperty("--fade-animation-start-distance",a+"px");var s="fade-animation-"+r;i?(this.recoursiveAddClass(s,o,this.mainContainer.current),setTimeout(function(){e.recoursiveDeleteClass(s,o,e.mainContainer.current)},1e3*n)):(this.mainContainer.current.childNodes.forEach(function(t){e.checkChild(o,t)&&(t.className=t.className+" "+s)}),setTimeout(function(){e.mainContainer.current.childNodes.forEach(function(t){e.checkChild(o,t)&&(t.className=t.className.replace(s,""))})},1e3*n))}},{key:"recoursiveAddClass",value:function(e,t,n){var r=this;n&&n.childNodes&&n.childNodes.forEach(function(n){return r.checkChild(t,n)&&(n.className=n.className+" "+e),r.recoursiveAddClass(e,t,n)})}},{key:"recoursiveDeleteClass",value:function(e,t,n){var r=this;n&&n.childNodes&&n.childNodes.forEach(function(n){return r.checkChild(t,n)&&(n.className=n.className.replace(e,"")),r.recoursiveDeleteClass(e,t,n)})}},{key:"checkChild",value:function(e,t){return"*"===e||"#"===e[0]&&t.id&&t.id.indexOf(e.replace("#",""))>-1||"."===e[0]&&t.className&&t.className.indexOf(e.replace(".",""))>-1||e.toUpperCase()===t.tagName}},{key:"render",value:function(){return a.default.createElement("div",{ref:this.mainContainer},this.props.children)}}]),t}();c.propTypes=s,c.defaultProps={duration:1,selector:"*",selectAll:!1,from:"bottom",startDistance:30,delay:0},t.default=c},function(e,t){e.exports=require("react")},function(e,t,n){e.exports=n(3)()},function(e,t,n){"use strict";var r=n(4);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){var r=n(6);"string"==typeof r&&(r=[[e.i,r,""]]);var a={insert:"head",singleton:!1};n(8)(r,a);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(7)(!1)).push([e.i,".fade-animation-top {\r\n    animation: fade-animation-top var(--fade-animation-duration);\r\n}\r\n  \r\n@keyframes fade-animation-top {\r\n    0% {\r\n        opacity: 0;\r\n        bottom: var(--fade-animation-start-distance);\r\n        position: relative;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        bottom: 0px;\r\n        position: relative;\r\n    }\r\n}\r\n\r\n.fade-animation-bottom {\r\n    animation: fade-animation-bottom var(--fade-animation-duration);\r\n}\r\n  \r\n@keyframes fade-animation-bottom {\r\n    0% {\r\n        opacity: 0;\r\n        top: var(--fade-animation-start-distance);\r\n        position: relative;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        top: 0px;\r\n        position: relative;\r\n    }\r\n}\r\n\r\n.fade-animation-left {\r\n    animation: fade-animation-left var(--fade-animation-duration);\r\n}\r\n  \r\n@keyframes fade-animation-left {\r\n    0% {\r\n        opacity: 0;\r\n        right: var(--fade-animation-start-distance);\r\n        position: relative;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        right: 0px;\r\n        position: relative;\r\n    }\r\n}\r\n\r\n\r\n.fade-animation-right {\r\n    animation: fade-animation-right var(--fade-animation-duration);\r\n}\r\n  \r\n@keyframes fade-animation-right {\r\n    0% {\r\n        opacity: 0;\r\n        left: var(--fade-animation-start-distance);\r\n        position: relative;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n        left: 0px;\r\n        position: relative;\r\n    }\r\n}",""])},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var a=(i=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),o=r.sources.map(function(e){return"/*# sourceURL=".concat(r.sourceRoot).concat(e," */")});return[n].concat(o).concat([a]).join("\n")}var i,s,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},a=0;a<this.length;a++){var o=this[a][0];null!=o&&(r[o]=!0)}for(var i=0;i<e.length;i++){var s=e[i];null!=s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="(".concat(s[2],") and (").concat(n,")")),t.push(s))}},t}},function(e,t,n){"use strict";var r,a={},o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}();function s(e,t){for(var n=[],r={},a=0;a<e.length;a++){var o=e[a],i=t.base?o[0]+t.base:o[0],s={css:o[1],media:o[2],sourceMap:o[3]};r[i]?r[i].parts.push(s):n.push(r[i]={id:i,parts:[s]})}return n}function c(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=a[r.id],i=0;if(o){for(o.refs++;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(v(r.parts[i],t))}else{for(var s=[];i<r.parts.length;i++)s.push(v(r.parts[i],t));a[r.id]={id:r.id,refs:1,parts:s}}}}function u(e){var t=document.createElement("style");if(void 0===e.attributes.nonce){var r=n.nc;r&&(e.attributes.nonce=r)}if(Object.keys(e.attributes).forEach(function(n){t.setAttribute(n,e.attributes[n])}),"function"==typeof e.insert)e.insert(t);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var l,f=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function p(e,t,n,r){var a=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function d(e,t,n){var r=n.css,a=n.media,o=n.sourceMap;if(a&&e.setAttribute("media",a),o&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var m=null,h=0;function v(e,t){var n,r,a;if(t.singleton){var o=h++;n=m||(m=u(t)),r=p.bind(null,n,o,!1),a=p.bind(null,n,o,!0)}else n=u(t),r=d.bind(null,n,t),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else a()}}e.exports=function(e,t){(t=t||{}).attributes="object"==typeof t.attributes?t.attributes:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=s(e,t);return c(n,t),function(e){for(var r=[],o=0;o<n.length;o++){var i=n[o],u=a[i.id];u&&(u.refs--,r.push(u))}e&&c(s(e,t),t);for(var l=0;l<r.length;l++){var f=r[l];if(0===f.refs){for(var p=0;p<f.parts.length;p++)f.parts[p]();delete a[f.id]}}}}}]);