css-transition-rule/dist/css-transition-rule.min.js

Simple css transitions

!function(t,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var e=n();for(var r in e)("object"==typeof exports?exports:t)[r]=e[r]}}(this,(function(){return(()=>{"use strict";var t={177:(t,n,e)=>{e.d(n,{Z:()=>s});var r=e(81),a=e.n(r),i=e(645),o=e.n(i)()(a());o.push([t.id,"/*\n    @credits https://tympanus.net/Development/ModalWindowEffects/\n*/\n\n/* Fade */\n.transition__Fade__enter {\n    opacity: 0!important;\n}\n.transition__Fade__enter-active {\n    transition: opacity .3s!important;\n    opacity: 1!important;\n}\n.transition__Fade__exit-active {\n    transition: opacity .3s!important;\n    opacity: 0!important;\n}\n\n/* ScaleUp */\n.transition__ScaleUp__enter {\n    opacity: 0!important;\n    transform: scale(.7)!important;\n}\n.transition__ScaleUp__enter-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 1!important;\n    transform: scale(1)!important;\n}\n.transition__ScaleUp__exit-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 0!important;\n    transform: scale(.7)!important;\n}\n\n/* SlideFromRight */\n.transition__SlideFromRight__enter {\n    opacity: 0!important;\n    transform: translateX(20%)!important;\n}\n.transition__SlideFromRight__enter-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 1!important;\n    transform: translateX(0)!important;\n}\n.transition__SlideFromRight__exit-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 0!important;\n    transform: translateX(20%)!important;\n}\n\n/* SlideFromLeft */\n.transition__SlideFromLeft__enter {\n    opacity: 0!important;\n    transform: translateX(-20%)!important;\n}\n.transition__SlideFromLeft__enter-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 1!important;\n    transform: translateX(0)!important;\n}\n.transition__SlideFromLeft__exit-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 0!important;\n    transform: translateX(-20%)!important;\n}\n\n/* SlideFromBottom */\n.transition__SlideFromBottom__enter {\n    opacity: 0!important;\n    transform: translateY(20%)!important;\n}\n.transition__SlideFromBottom__enter-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 1!important;\n    transform: translateY(0)!important;\n}\n.transition__SlideFromBottom__exit-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 0!important;\n    transform: translateY(20%)!important;\n}\n\n/* SlideFromTop */\n.transition__SlideFromTop__enter {\n    opacity: 0!important;\n    transform: translateY(-20%)!important;\n}\n.transition__SlideFromTop__enter-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 1!important;\n    transform: translateY(0)!important;\n}\n.transition__SlideFromTop__exit-active {\n    transition: opacity .3s, transform .3s!important;\n    opacity: 0!important;\n    transform: translateY(-20%)!important;\n}\n\n/* Newspaper */\n.transition__Newspaper__enter {\n    opacity: 0!important;\n    transform: scale(0) rotate(720deg)!important;\n}\n.transition__Newspaper__enter-active {\n    transition: opacity .5s, transform .5s!important;\n    opacity: 1!important;\n    transform: scale(1) rotate(0)!important;\n}\n.transition__Newspaper__exit-active {\n    transition: opacity .5s, transform .5s!important;\n    opacity: 0!important;\n    transform: scale(0) rotate(720deg)!important;\n}\n\n/* Fall */\n.transition__Fall__enter {\n    transform: perspective(1200px) rotateX(30deg) scale(1.5)!important;\n    opacity: 0!important;\n}\n.transition__Fall__enter-active {\n    transition: opacity .2s ease-in, transform .3s ease-in!important;\n\ttransform: none!important;\n    opacity: 1!important;\n}\n.transition__Fall__exit-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n    transform: perspective(1200px) rotateX(30deg) scale(1.5)!important;\n    opacity: 0!important;\n}\n\n/* SideFall */\n.transition__SideFall__enter {\n    transform: translate(30%) translateZ(600px) rotate(10deg) scale(1.3)!important;\n    opacity: 0!important;\n}\n.transition__SideFall__enter-active {\n    transition: opacity .2s ease-in, transform .3s ease-in!important;\n\ttransform: none!important;\n    opacity: 1!important;\n}\n.transition__SideFall__exit-active {\n    transition: opacity 0.2s ease-in, transform 0.3s ease-in!important;\n    transform: translate(30%) translateZ(600px) rotate(10deg) scale(1.3)!important;\n    opacity: 0!important;\n}\n\n/* Slide_StickToTop */\n.transition__Slide_StickToTop__enter {\n    transform: translateY(-50%)!important;\n    opacity: 0!important;\n}\n.transition__Slide_StickToTop__enter-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n\ttransform: translateY(0)!important;\n    opacity: 1!important;\n}\n.transition__Slide_StickToTop__exit-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n    transform: translateY(-50%)!important;\n    opacity: 0!important;\n}\n\n/* HorizontalFlip3D */\n.transition__HorizontalFlip3D__enter {\n    transform: perspective(1200px) rotateY(-70deg)!important;\n    opacity: 0!important;\n}\n.transition__HorizontalFlip3D__enter-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n\ttransform: none!important;\n    opacity: 1!important;\n}\n.transition__HorizontalFlip3D__exit-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n    transform: perspective(1200px) rotateY(-70deg)!important;\n    opacity: 0!important;\n}\n\n/* VerticalFlip3D */\n.transition__VerticalFlip3D__enter {\n    transform: perspective(1200px) rotateX(-70deg)!important;\n    opacity: 0!important;\n}\n.transition__VerticalFlip3D__enter-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n\ttransform: none!important;\n    opacity: 1!important;\n}\n.transition__VerticalFlip3D__exit-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n    transform: perspective(1200px) rotateX(-70deg)!important;\n    opacity: 0!important;\n}\n\n/* Sign3D */\n.transition__Sign3D__enter {\n    transform: perspective(1300px) rotateX(-60deg)!important;\n    transform-origin: 50% 0;\n    opacity: 0!important;\n}\n.transition__Sign3D__enter-active {\n    transition: opacity .3s ease-in, transform .3s ease-in!important;\n\ttransform: none!important;\n    opacity: 1!important;\n}\n.transition__Sign3D__exit-active {\n    transition: opacity 0.3s ease-in, transform 0.3s ease-in!important;\n    transform: perspective(1300px) rotateX(-60deg)!important;\n    transform-origin: 50% 0;\n    opacity: 0!important;\n}\n\n/* SuperScale */\n.transition__SuperScale__enter {\n    transform: scale(1.5)!important;\n    opacity: 0!important;\n}\n.transition__SuperScale__enter-active {\n    transition: opacity .3s, transform .3s!important;\n\ttransform: scale(1)!important;\n    opacity: 1!important;\n}\n.transition__SuperScale__exit-active {\n    transition: opacity 0.3s, transform 0.3s!important;\n    transform: scale(1.5)!important;\n    opacity: 0!important;\n}",""]);const s=o},645:t=>{t.exports=function(t){var n=[];return n.toString=function(){return this.map((function(n){var e="",r=void 0!==n[5];return n[4]&&(e+="@supports (".concat(n[4],") {")),n[2]&&(e+="@media ".concat(n[2]," {")),r&&(e+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),e+=t(n),r&&(e+="}"),n[2]&&(e+="}"),n[4]&&(e+="}"),e})).join("")},n.i=function(t,e,r,a,i){"string"==typeof t&&(t=[[null,t,void 0]]);var o={};if(r)for(var s=0;s<this.length;s++){var p=this[s][0];null!=p&&(o[p]=!0)}for(var l=0;l<t.length;l++){var c=[].concat(t[l]);r&&o[c[0]]||(void 0!==i&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=i),e&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=e):c[2]=e),a&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=a):c[4]="".concat(a)),n.push(c))}},n}},81:t=>{t.exports=function(t){return t[1]}},379:t=>{var n=[];function e(t){for(var e=-1,r=0;r<n.length;r++)if(n[r].identifier===t){e=r;break}return e}function r(t,r){for(var i={},o=[],s=0;s<t.length;s++){var p=t[s],l=r.base?p[0]+r.base:p[0],c=i[l]||0,m="".concat(l," ").concat(c);i[l]=c+1;var _=e(m),f={css:p[1],media:p[2],sourceMap:p[3],supports:p[4],layer:p[5]};if(-1!==_)n[_].references++,n[_].updater(f);else{var u=a(f,r);r.byIndex=s,n.splice(s,0,{identifier:m,updater:u,references:1})}o.push(m)}return o}function a(t,n){var e=n.domAPI(n);return e.update(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap&&n.supports===t.supports&&n.layer===t.layer)return;e.update(t=n)}else e.remove()}}t.exports=function(t,a){var i=r(t=t||[],a=a||{});return function(t){t=t||[];for(var o=0;o<i.length;o++){var s=e(i[o]);n[s].references--}for(var p=r(t,a),l=0;l<i.length;l++){var c=e(i[l]);0===n[c].references&&(n[c].updater(),n.splice(c,1))}i=p}}},569:t=>{var n={};t.exports=function(t,e){var r=function(t){if(void 0===n[t]){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(t){e=null}n[t]=e}return n[t]}(t);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(e)}},216:t=>{t.exports=function(t){var n=document.createElement("style");return t.setAttributes(n,t.attributes),t.insert(n,t.options),n}},565:(t,n,e)=>{t.exports=function(t){var n=e.nc;n&&t.setAttribute("nonce",n)}},795:t=>{t.exports=function(t){var n=t.insertStyleElement(t);return{update:function(e){!function(t,n,e){var r="";e.supports&&(r+="@supports (".concat(e.supports,") {")),e.media&&(r+="@media ".concat(e.media," {"));var a=void 0!==e.layer;a&&(r+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),r+=e.css,a&&(r+="}"),e.media&&(r+="}"),e.supports&&(r+="}");var i=e.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(r,t,n.options)}(n,t,e)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(n)}}}},589:t=>{t.exports=function(t,n){if(n.styleSheet)n.styleSheet.cssText=t;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(t))}}}},n={};function e(r){var a=n[r];if(void 0!==a)return a.exports;var i=n[r]={id:r,exports:{}};return t[r](i,i.exports,e),i.exports}e.n=t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},e.d=(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},e.o=(t,n)=>Object.prototype.hasOwnProperty.call(t,n),e.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{e.r(r),e.d(r,{TRANSITIONS:()=>S,csstransition:()=>h});var t=e(379),n=e.n(t),a=e(795),i=e.n(a),o=e(569),s=e.n(o),p=e(565),l=e.n(p),c=e(216),m=e.n(c),_=e(589),f=e.n(_),u=e(177),d={};d.styleTagTransform=f(),d.setAttributes=l(),d.insert=s().bind(null,"head"),d.domAPI=i(),d.insertStyleElement=m(),n()(u.Z,d),u.Z&&u.Z.locals&&u.Z.locals;class y{constructor(t=null,n=null){this._transitions=[],this._activeTransitions=[],this._delay=0,t&&this.add(t,n||S.Fade)}add(t,n){let e="string"==typeof n?[{rule:String(n)}]:n;return e.length<2&&e.push({...e[0]}),this._transitions.push({target:t,states:e}),this}enter(t=0){return this._delay=t,this._type="enter",this._activeTransitions=this._transitions.map((t=>{let n=t.states;return{target:t.target,states:[{rule:n[0].rule?`transition__${n[0].rule}__enter`:null},{rule:n[1].rule?`transition__${n[1].rule}__enter-active`:null}]}})),this}exit(t=0){return this._delay=t,this._type="exit",this._activeTransitions=this._transitions.map((t=>{let n=t.states;return{target:t.target,states:[{rule:null},{rule:n[1].rule?`transition__${n[1].rule}__exit-active`:null}]}})),this}paralell(t=null){let n=!1,e=this._activeTransitions;function r(){let t,r;if(!n){for(t=0;t<e.length;t++)r=e[t],v(r,2);setTimeout((()=>a(!1,!0)),1)}}function a(r,a=!1){n=!0,e.forEach((t=>{let n,e,r=t.target;r._stage0&&(n=r._style,e=r._class,n?r.setAttribute("style",n):r.removeAttribute("style"),e?r.setAttribute("class",e):r.removeAttribute("class"),delete r._stage0,delete r._style,delete r._class,delete r.clear),t.states.forEach((t=>{t.rule&&r.classList.remove(t.rule)}))})),a&&t&&t(r)}e.findIndex((({target:t})=>!t))>-1&&t&&t(),n||(e.forEach((({target:t},n)=>{let r=t.clear;r&&r(!0,n==e.length-1)})),e.forEach((t=>{let n=t.target;n._stage0||(n._stage0=!0,n._style=n.getAttribute("style"),n._class=n.getAttribute("class"),n.clear=a),v(t,0)}))),document.documentElement.offsetHeight,setTimeout((()=>{!function(t){let r,a=e.length;if(!n)for(r=0;r<e.length;r++)v(e[r],1,(()=>{a--,0==a&&t()}))}(r)}),this._delay||1)}sequence(t=null){let n=0,e=this._transitions,r=()=>{let a,i=e[n];n++,i?(a=h(i.target,i.states),"exit"==this._type?a.exit():a.enter(),a.paralell((()=>{r()}))):t&&t()};r()}run(t=null){this.paralell(t)}}function v(t,n,e=null){let r,a,i;if(t&&t.states[n]&&(a=t.target,i=t.states,function(t,n){let e={};n.prestate&&n.prestate(t,e),n.props&&Object.keys(n.props).forEach((r=>{let a=n.props[r];"duration"==r&&(r="transition-duration",a=a/1e3+"s",t.style.transition=`all ${a}`),t.style[r]=function(t,n){return"string"==typeof t&&Object.keys(n).forEach((e=>{t=t.replace(`{${e}}`,n[e])})),t}(a,e)})),function(t,n){n&&t.classList.add(n)}(t,n.rule),n.callback&&n.callback(t)}(a,i[n]),1==n)){try{r=getComputedStyle(a).transitionDuration,r=Math.max.apply(null,r.split(",").map((t=>parseFloat(t.trim())||.2)))}catch(t){r=.3}setTimeout((function(){e()}),1e3*r)}}const S={Fade:"Fade",Fall:"Fall",ScaleUp:"ScaleUp",HorizontalFlip3D:"HorizontalFlip3D",Newspaper:"Newspaper",SideFall:"SideFall",Sign3D:"Sign3D",SuperScale:"SuperScale",SlideFromRight:"SlideFromRight",SlideFromLeft:"SlideFromLeft",SlideFromBottom:"SlideFromBottom",SlideFromTop:"SlideFromTop",Slide_StickToTop:"Slide_StickToTop",VerticalFlip3D:"VerticalFlip3D"};function h(t=null,n=null){return new y(t,n)}})(),r})()}));