├── .gitignore ├── .npmignore ├── README.md ├── dist ├── index.js ├── index.js.map ├── index.mjs ├── index.mjs.map ├── index.umd.js └── index.umd.js.map ├── package-lock.json ├── package.json └── source ├── css-transition.js ├── ease.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .cache -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .cache 2 | source -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

css-transit 🎉

2 | 3 | A tiny modern library for fast, smooth, and controllable CSS transitions. 4 | 5 | ### Install 6 | ```bash 7 | npm install css-transit 8 | ``` 9 | 10 | ### Why 11 | Libraries like `GSAP` or `Popmotion` are not needed when dealing with basic CSS transitions, and can significantly reduce performance. 12 | 13 | `css-transit` uses a common method of _triggering layout_ to allow _inline css transitions_ on demand, keeping DOM changes to a minimum which allows the browser to animate smoothly. 14 | It has been used in multiples of large client production applications over several years. 15 | 16 | ### Features: 17 | - Transition one or multiple elements between css props 18 | - `gsap`-like usage with `from`, `to`, `ease`, `stagger`, and `delay` 19 | - Returns a `Promise` which resolves when the transition is finished (through the `ontransitionend` event) 20 | - Standard `easing` curves included 🎁 21 | - Smaller than *1kb* gzipped 👌 22 | 23 | ### Usage: 24 | 25 | #### Single method for everything 26 | `css-transit` uses a single method,`cssTransition()`, which does different things based on the supplied arguments. 27 | 28 | > See below examples for more detail. 29 | 30 | #### Usage examples: 31 | 32 | 33 | 34 | 37 | 51 | 52 | 53 | 54 | 57 | 79 | 80 | 81 | 82 | 85 | 99 | 100 | 101 | 102 | 105 | 123 | 124 | 125 | 126 | 129 | 155 | 156 | 157 | 158 | 161 | 176 | 177 |
35 | 36 | 38 |
Basic usage
39 | 40 | ```js 41 | import { cssTransition, ease } from 'css-transit' 42 | 43 | const element = document.querySelector('.element') 44 | 45 | cssTransition(element, 500, { 46 | transform: 'translate(200px, 200px) scale(1)', 47 | }) 48 | ``` 49 | 50 |
55 | 56 | 58 |
Easing
59 | 60 | ```js 61 | cssTransition(element, 500, { 62 | transform: 'translate(0, 0) scale(1.5)', 63 | }, { 64 | transform: 'translate(200px, 200px) scale(1)', 65 | ease: ease.inOutQuint 66 | }) 67 | ``` 68 | `css-transit` comes with the standard easing functions. 69 | 70 | You can also supply your own `cubic-bezier`: 71 | ```js 72 | cssTransition(element, 500, { 73 | opacity: 1, 74 | ease: 'cubic-bezier(0.540, 0.745, 0.230, 0.765)' 75 | } 76 | ``` 77 | 78 |
83 | 84 | 86 |
Showing / Hiding
87 | 88 | ```js 89 | cssTransition(thing, 500, { 90 | opacity: 0, 91 | transform: 'translate(80px, 100px) scale(1.3) rotate(40deg)', 92 | display: 'none' 93 | }) 94 | ``` 95 | 96 | `display` props will be applied after the transition finishes, to allow easy hiding of elements. 97 | 98 |
103 | 104 | 106 |
Staggering
107 | 108 | ```js 109 | // first convert the NodeList to an Array 110 | const elements = [...document.querySelectorAll('.thing')] 111 | 112 | cssTransition(elements, 500, { 113 | transform: 'translate(0, 0)', 114 | }, { 115 | transform: 'translate(0, 200px)', 116 | ease: ease.inOutQuart 117 | }, 50) 118 | ``` 119 | 120 | When transitioning multiple items, the last argument can be used to stagger the animations (this adds a `transition-delay`). 121 | 122 |
127 | 128 | 130 |
Callbacks / Promises
131 | 132 | ```js 133 | function loop() { 134 | cssTransition(elements, 500, { 135 | transform: 'translate(0, 200px) scaleY(.4) scaleX(.2) rotate(180deg)', 136 | ease: ease.inOutQuart 137 | }, 100) 138 | .then(() => 139 | cssTransition(elements, 500, { 140 | transform: 'rotate(360deg)', 141 | ease: ease.inOutQuart, 142 | clearStyle: true 143 | }, 100) 144 | ) 145 | .then(loop) 146 | } 147 | 148 | loop() 149 | ``` 150 | 151 | `cssTransition` returns a `Promise` that is resolved when the animation has finished. 152 | When transitioning multiple elements, the `Promise` is resolved when the transition of the _last_ element finishes. 153 | 154 |
159 | 160 | 162 |
Function props
163 | 164 | ```js 165 | cssTransition([...thing], 500, { 166 | transform: (el, i) => `translate(0, ${(i+1) * 40}px)`, 167 | ease: ease.inOutQuart 168 | }, 100) 169 | ``` 170 | 171 | `cssTransition 1.2.0+` allows you to use functions that returns a value as props. 172 | The first argument is the `element` being changed. 173 | The second argument is the `number` of the element in a staggered array. 174 | 175 |
178 | 179 | #### Props 180 | `css-transit` simply sets and unsets inline styles and support any standard css props that would go into the `HTMLElement.style` property. It also includes a few special props to ease development. 181 | 182 | - `ease: ""` 183 | can be used to provide common easing functions and self-defined `cubic-bezier()` 184 | - `display: ""` 185 | transitions will be applied at the end of transition 186 | - `delay: 500` 187 | delays the start of the transition using standard `transition-delay` 188 | - `clearStyles: true` 189 | clears all styles after transition finished. 190 | 191 | 192 | #### Methods 193 | `css-transit` uses a single method for all transitions based on context. 194 | ```js 195 | // Element transition to end props 196 | cssTransition( 197 | element: HTMLElement, 198 | ms: Number, 199 | endProps: Object 200 | ) 201 | 202 | // Element transition from starting props, to end props 203 | cssTransition( 204 | element: HTMLElement, 205 | ms: Number, 206 | fromProps: Object, 207 | endProps: Object 208 | ) 209 | 210 | // Multiple element transition to end props 211 | cssTransition( 212 | elements: Array, 213 | ms: Number, 214 | endProps: Object 215 | ) 216 | 217 | // Multiple element transition from starting props, to end props 218 | cssTransition( 219 | elements: Array, 220 | ms: Number, 221 | fromProps: Object, 222 | endProps: Object 223 | ) 224 | 225 | // Multiple element staggered transition to end props 226 | cssTransition( 227 | elements: Array, 228 | ms: Number, 229 | endProps: Object, 230 | staggerInterval: Number 231 | ) 232 | 233 | // Multiple element staggered transition from starting props, to end props 234 | cssTransition( 235 | elements: Array, 236 | ms: Number, 237 | fromProps: Object, 238 | endProps: Object, 239 | staggerInterval: Number 240 | ) 241 | ``` -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | function i(i,e,n,t){for(var c in e)if(!n||"display"!=c){var r=e[c]instanceof Function?e[c](i,t):e[c];i.style[c]=r}}exports.cssTransition=function(e,n,t,c,r){var u=Array.isArray(e)?e:[e],o="object"==typeof c?t:null,a=o?c:t,b=(o?r:c)||0;return u.forEach(function(e,n){e.style.transition="none",e.removeEventListener("transitionend",e.__onTransitionEnd),o&&i(e,o,!1,n)}),u[0].offsetWidth=u[0].offsetWidth,u.forEach(function(e,t){e.style.transition="all",e.style.transitionDuration=n+"ms",e.style.transitionTimingFunction=a.ease?a.ease:"ease",e.style.transitionDelay=(a.delay?a.delay:0)+b*t+"ms",i(e,a,!0,t)}),new Promise(function(i){var e=u[u.length-1];e.__onTransitionEnd=function(n){n.target===e&&(n.target.removeEventListener("transitionend",n.target.__onTransitionEnd),a.display&&u.forEach(function(i,e){i.style.display=a.display}),a.clearStyle&&u.forEach(function(i,e){i.removeAttribute("style")}),i())},e.addEventListener("transitionend",e.__onTransitionEnd)})},exports.ease={inQuad:"cubic-bezier(0.550, 0.085, 0.680, 0.530)",inCubic:"cubic-bezier(0.550, 0.055, 0.675, 0.190)",inQuart:"cubic-bezier(0.895, 0.030, 0.685, 0.220)",inQuint:"cubic-bezier(0.755, 0.050, 0.855, 0.060)",inSine:"cubic-bezier(0.470, 0.000, 0.745, 0.715)",inExpo:"cubic-bezier(0.950, 0.050, 0.795, 0.035)",inCirc:"cubic-bezier(0.600, 0.040, 0.980, 0.335)",inBack:"cubic-bezier(0.600, -0.280, 0.735, 0.045)",outQuad:"cubic-bezier(0.250, 0.460, 0.450, 0.940)",outCubic:"cubic-bezier(0.215, 0.610, 0.355, 1.000)",outQuart:"cubic-bezier(0.165, 0.840, 0.440, 1.000)",outQuint:"cubic-bezier(0.230, 1.000, 0.320, 1.000)",outSine:"cubic-bezier(0.390, 0.575, 0.565, 1.000)",outExpo:"cubic-bezier(0.190, 1.000, 0.220, 1.000)",outCirc:"cubic-bezier(0.075, 0.820, 0.165, 1.000)",outBack:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",inOutQuad:"cubic-bezier(0.455, 0.030, 0.515, 0.955)",inOutCubic:"cubic-bezier(0.645, 0.045, 0.355, 1.000)",inOutQuart:"cubic-bezier(0.770, 0.000, 0.175, 1.000)",inOutQuint:"cubic-bezier(0.860, 0.000, 0.070, 1.000)",inOutSine:"cubic-bezier(0.445, 0.050, 0.550, 0.950)",inOutExpo:"cubic-bezier(1.000, 0.000, 0.000, 1.000)",inOutCirc:"cubic-bezier(0.785, 0.135, 0.150, 0.860)",inOutBack:"cubic-bezier(0.680, -0.550, 0.265, 1.550)",linear:"linear"}; 2 | //# sourceMappingURL=index.js.map 3 | -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sources":["../source/css-transition.js","../source/ease.js"],"sourcesContent":["function setStyles(el, styles, isTo, i) {\n for (var prop in styles) {\n if (isTo && prop == 'display') continue\n const val = (styles[prop] instanceof Function) ? styles[prop](el, i) : styles[prop]\n el.style[prop] = val\n }\n}\n\nfunction cssTransition(target, time, arg1, arg2, arg3) {\n var els = Array.isArray(target) ? target : [target]\n var from = typeof arg2 === 'object' ? arg1 : null\n var to = from ? arg2 : arg1\n var staggerDelay = (from ? arg3 : arg2) || 0\n\n els.forEach((el, i) => {\n el.style.transition = 'none'\n el.removeEventListener('transitionend', el.__onTransitionEnd)\n\n if (from) {\n setStyles(el, from, false, i)\n }\n })\n\n els[0].offsetWidth = els[0].offsetWidth // trigger layout\n\n els.forEach((el, i) => {\n el.style.transition = 'all'\n el.style.transitionDuration = time + 'ms'\n el.style.transitionTimingFunction = to.ease ? to.ease : 'ease'\n el.style.transitionDelay = ((to.delay ? to.delay : 0) + (staggerDelay * i)) + 'ms'\n setStyles(el, to, true, i)\n })\n\n return new Promise((resolve) => {\n var transitionTarget = els[els.length - 1]\n transitionTarget.__onTransitionEnd = function(event) {\n if (event.target === transitionTarget) {\n event.target.removeEventListener('transitionend', event.target.__onTransitionEnd)\n if (to.display) els.forEach((el, i) => { el.style.display = to.display })\n if (to.clearStyle) els.forEach((el, i) => { el.removeAttribute('style') })\n resolve()\n }\n }\n transitionTarget.addEventListener('transitionend', transitionTarget.__onTransitionEnd)\n })\n}\n\nexport {\n cssTransition\n}","/*\n Easing functions that can be used by the css animation library.\n*/\nconst ease = {\n inQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n inCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n inQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n inQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n inSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n inExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n inCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n inBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n\n outQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n outCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n outQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n outQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n outSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n outExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n outCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n outBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n\n inOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n inOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n inOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n inOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n inOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n inOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n inOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n\n linear: 'linear'\n}\n\nexport {\n ease\n}"],"names":["setStyles","el","styles","isTo","i","prop","val","Function","style","target","time","arg1","arg2","arg3","els","Array","isArray","from","to","staggerDelay","forEach","transition","removeEventListener","__onTransitionEnd","offsetWidth","transitionDuration","transitionTimingFunction","ease","transitionDelay","delay","Promise","resolve","transitionTarget","length","event","display","clearStyle","removeAttribute","addEventListener","inQuad","inCubic","inQuart","inQuint","inSine","inExpo","inCirc","inBack","outQuad","outCubic","outQuart","outQuint","outSine","outExpo","outCirc","outBack","inOutQuad","inOutCubic","inOutQuart","inOutQuint","inOutSine","inOutExpo","inOutCirc","inOutBack","linear"],"mappings":"AAAA,SAASA,EAAUC,EAAIC,EAAQC,EAAMC,OAC9B,IAAIC,KAAQH,MACXC,GAAgB,WAARE,OACNC,EAAOJ,EAAOG,aAAiBE,SAAYL,EAAOG,GAAMJ,EAAIG,GAAKF,EAAOG,GAC9EJ,EAAGO,MAAMH,GAAQC,yBAIrB,SAAuBG,EAAQC,EAAMC,EAAMC,EAAMC,OAC3CC,EAAMC,MAAMC,QAAQP,GAAUA,EAAS,CAACA,GACxCQ,EAAuB,iBAATL,EAAoBD,EAAO,KACzCO,EAAKD,EAAOL,EAAOD,EACnBQ,GAAgBF,EAAOJ,EAAOD,IAAS,SAE3CE,EAAIM,iBAASnB,EAAIG,GACfH,EAAGO,MAAMa,WAAa,OACtBpB,EAAGqB,oBAAoB,gBAAiBrB,EAAGsB,mBAEvCN,GACFjB,EAAUC,EAAIgB,GAAM,EAAOb,KAI/BU,EAAI,GAAGU,YAAcV,EAAI,GAAGU,YAE5BV,EAAIM,iBAASnB,EAAIG,GACfH,EAAGO,MAAMa,WAAa,MACtBpB,EAAGO,MAAMiB,mBAAqBf,EAAO,KACrCT,EAAGO,MAAMkB,yBAA2BR,EAAGS,KAAOT,EAAGS,KAAO,OACxD1B,EAAGO,MAAMoB,iBAAoBV,EAAGW,MAAQX,EAAGW,MAAQ,GAAMV,EAAef,EAAM,KAC9EJ,EAAUC,EAAIiB,GAAI,EAAMd,KAGnB,IAAI0B,iBAASC,OACdC,EAAmBlB,EAAIA,EAAImB,OAAS,GACxCD,EAAiBT,kBAAoB,SAASW,GACxCA,EAAMzB,SAAWuB,IACnBE,EAAMzB,OAAOa,oBAAoB,gBAAiBY,EAAMzB,OAAOc,mBAC3DL,EAAGiB,SAASrB,EAAIM,iBAASnB,EAAIG,GAAQH,EAAGO,MAAM2B,QAAUjB,EAAGiB,UAC3DjB,EAAGkB,YAAYtB,EAAIM,iBAASnB,EAAIG,GAAQH,EAAGoC,gBAAgB,WAC/DN,MAGJC,EAAiBM,iBAAiB,gBAAiBN,EAAiBT,mCCxC3D,CACXgB,OAAQ,2CACRC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,4CAERC,QAAS,2CACTC,SAAU,2CACVC,SAAU,2CACVC,SAAU,2CACVC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CAETC,UAAW,2CACXC,WAAY,2CACZC,WAAY,2CACZC,WAAY,2CACZC,UAAW,2CACXC,UAAW,2CACXC,UAAW,2CACXC,UAAW,4CAEXC,OAAQ"} -------------------------------------------------------------------------------- /dist/index.mjs: -------------------------------------------------------------------------------- 1 | function i(i,e,n,t){for(var c in e)if(!n||"display"!=c){var r=e[c]instanceof Function?e[c](i,t):e[c];i.style[c]=r}}function e(e,n,t,c,r){var u=Array.isArray(e)?e:[e],o="object"==typeof c?t:null,b=o?c:t,a=(o?r:c)||0;return u.forEach(function(e,n){e.style.transition="none",e.removeEventListener("transitionend",e.__onTransitionEnd),o&&i(e,o,!1,n)}),u[0].offsetWidth=u[0].offsetWidth,u.forEach(function(e,t){e.style.transition="all",e.style.transitionDuration=n+"ms",e.style.transitionTimingFunction=b.ease?b.ease:"ease",e.style.transitionDelay=(b.delay?b.delay:0)+a*t+"ms",i(e,b,!0,t)}),new Promise(function(i){var e=u[u.length-1];e.__onTransitionEnd=function(n){n.target===e&&(n.target.removeEventListener("transitionend",n.target.__onTransitionEnd),b.display&&u.forEach(function(i,e){i.style.display=b.display}),b.clearStyle&&u.forEach(function(i,e){i.removeAttribute("style")}),i())},e.addEventListener("transitionend",e.__onTransitionEnd)})}var n={inQuad:"cubic-bezier(0.550, 0.085, 0.680, 0.530)",inCubic:"cubic-bezier(0.550, 0.055, 0.675, 0.190)",inQuart:"cubic-bezier(0.895, 0.030, 0.685, 0.220)",inQuint:"cubic-bezier(0.755, 0.050, 0.855, 0.060)",inSine:"cubic-bezier(0.470, 0.000, 0.745, 0.715)",inExpo:"cubic-bezier(0.950, 0.050, 0.795, 0.035)",inCirc:"cubic-bezier(0.600, 0.040, 0.980, 0.335)",inBack:"cubic-bezier(0.600, -0.280, 0.735, 0.045)",outQuad:"cubic-bezier(0.250, 0.460, 0.450, 0.940)",outCubic:"cubic-bezier(0.215, 0.610, 0.355, 1.000)",outQuart:"cubic-bezier(0.165, 0.840, 0.440, 1.000)",outQuint:"cubic-bezier(0.230, 1.000, 0.320, 1.000)",outSine:"cubic-bezier(0.390, 0.575, 0.565, 1.000)",outExpo:"cubic-bezier(0.190, 1.000, 0.220, 1.000)",outCirc:"cubic-bezier(0.075, 0.820, 0.165, 1.000)",outBack:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",inOutQuad:"cubic-bezier(0.455, 0.030, 0.515, 0.955)",inOutCubic:"cubic-bezier(0.645, 0.045, 0.355, 1.000)",inOutQuart:"cubic-bezier(0.770, 0.000, 0.175, 1.000)",inOutQuint:"cubic-bezier(0.860, 0.000, 0.070, 1.000)",inOutSine:"cubic-bezier(0.445, 0.050, 0.550, 0.950)",inOutExpo:"cubic-bezier(1.000, 0.000, 0.000, 1.000)",inOutCirc:"cubic-bezier(0.785, 0.135, 0.150, 0.860)",inOutBack:"cubic-bezier(0.680, -0.550, 0.265, 1.550)",linear:"linear"};export{e as cssTransition,n as ease}; 2 | //# sourceMappingURL=index.mjs.map 3 | -------------------------------------------------------------------------------- /dist/index.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.mjs","sources":["../source/css-transition.js","../source/ease.js"],"sourcesContent":["function setStyles(el, styles, isTo, i) {\n for (var prop in styles) {\n if (isTo && prop == 'display') continue\n const val = (styles[prop] instanceof Function) ? styles[prop](el, i) : styles[prop]\n el.style[prop] = val\n }\n}\n\nfunction cssTransition(target, time, arg1, arg2, arg3) {\n var els = Array.isArray(target) ? target : [target]\n var from = typeof arg2 === 'object' ? arg1 : null\n var to = from ? arg2 : arg1\n var staggerDelay = (from ? arg3 : arg2) || 0\n\n els.forEach((el, i) => {\n el.style.transition = 'none'\n el.removeEventListener('transitionend', el.__onTransitionEnd)\n\n if (from) {\n setStyles(el, from, false, i)\n }\n })\n\n els[0].offsetWidth = els[0].offsetWidth // trigger layout\n\n els.forEach((el, i) => {\n el.style.transition = 'all'\n el.style.transitionDuration = time + 'ms'\n el.style.transitionTimingFunction = to.ease ? to.ease : 'ease'\n el.style.transitionDelay = ((to.delay ? to.delay : 0) + (staggerDelay * i)) + 'ms'\n setStyles(el, to, true, i)\n })\n\n return new Promise((resolve) => {\n var transitionTarget = els[els.length - 1]\n transitionTarget.__onTransitionEnd = function(event) {\n if (event.target === transitionTarget) {\n event.target.removeEventListener('transitionend', event.target.__onTransitionEnd)\n if (to.display) els.forEach((el, i) => { el.style.display = to.display })\n if (to.clearStyle) els.forEach((el, i) => { el.removeAttribute('style') })\n resolve()\n }\n }\n transitionTarget.addEventListener('transitionend', transitionTarget.__onTransitionEnd)\n })\n}\n\nexport {\n cssTransition\n}","/*\n Easing functions that can be used by the css animation library.\n*/\nconst ease = {\n inQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n inCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n inQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n inQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n inSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n inExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n inCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n inBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n\n outQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n outCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n outQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n outQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n outSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n outExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n outCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n outBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n\n inOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n inOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n inOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n inOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n inOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n inOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n inOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n\n linear: 'linear'\n}\n\nexport {\n ease\n}"],"names":["setStyles","el","styles","isTo","i","prop","val","Function","style","cssTransition","target","time","arg1","arg2","arg3","els","Array","isArray","from","to","staggerDelay","forEach","transition","removeEventListener","__onTransitionEnd","offsetWidth","transitionDuration","transitionTimingFunction","ease","transitionDelay","delay","Promise","resolve","transitionTarget","length","event","display","clearStyle","removeAttribute","addEventListener","const","inQuad","inCubic","inQuart","inQuint","inSine","inExpo","inCirc","inBack","outQuad","outCubic","outQuart","outQuint","outSine","outExpo","outCirc","outBack","inOutQuad","inOutCubic","inOutQuart","inOutQuint","inOutSine","inOutExpo","inOutCirc","inOutBack","linear"],"mappings":"AAAA,SAASA,EAAUC,EAAIC,EAAQC,EAAMC,OAC9B,IAAIC,KAAQH,MACXC,GAAgB,WAARE,OACNC,EAAOJ,EAAOG,aAAiBE,SAAYL,EAAOG,GAAMJ,EAAIG,GAAKF,EAAOG,GAC9EJ,EAAGO,MAAMH,GAAQC,GAIrB,SAASG,EAAcC,EAAQC,EAAMC,EAAMC,EAAMC,OAC3CC,EAAMC,MAAMC,QAAQP,GAAUA,EAAS,CAACA,GACxCQ,EAAuB,iBAATL,EAAoBD,EAAO,KACzCO,EAAKD,EAAOL,EAAOD,EACnBQ,GAAgBF,EAAOJ,EAAOD,IAAS,SAE3CE,EAAIM,iBAASpB,EAAIG,GACfH,EAAGO,MAAMc,WAAa,OACtBrB,EAAGsB,oBAAoB,gBAAiBtB,EAAGuB,mBAEvCN,GACFlB,EAAUC,EAAIiB,GAAM,EAAOd,KAI/BW,EAAI,GAAGU,YAAcV,EAAI,GAAGU,YAE5BV,EAAIM,iBAASpB,EAAIG,GACfH,EAAGO,MAAMc,WAAa,MACtBrB,EAAGO,MAAMkB,mBAAqBf,EAAO,KACrCV,EAAGO,MAAMmB,yBAA2BR,EAAGS,KAAOT,EAAGS,KAAO,OACxD3B,EAAGO,MAAMqB,iBAAoBV,EAAGW,MAAQX,EAAGW,MAAQ,GAAMV,EAAehB,EAAM,KAC9EJ,EAAUC,EAAIkB,GAAI,EAAMf,KAGnB,IAAI2B,iBAASC,OACdC,EAAmBlB,EAAIA,EAAImB,OAAS,GACxCD,EAAiBT,kBAAoB,SAASW,GACxCA,EAAMzB,SAAWuB,IACnBE,EAAMzB,OAAOa,oBAAoB,gBAAiBY,EAAMzB,OAAOc,mBAC3DL,EAAGiB,SAASrB,EAAIM,iBAASpB,EAAIG,GAAQH,EAAGO,MAAM4B,QAAUjB,EAAGiB,UAC3DjB,EAAGkB,YAAYtB,EAAIM,iBAASpB,EAAIG,GAAQH,EAAGqC,gBAAgB,WAC/DN,MAGJC,EAAiBM,iBAAiB,gBAAiBN,EAAiBT,qBCxCxEgB,IAAMZ,EAAO,CACXa,OAAQ,2CACRC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,4CAERC,QAAS,2CACTC,SAAU,2CACVC,SAAU,2CACVC,SAAU,2CACVC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CAETC,UAAW,2CACXC,WAAY,2CACZC,WAAY,2CACZC,WAAY,2CACZC,UAAW,2CACXC,UAAW,2CACXC,UAAW,2CACXC,UAAW,4CAEXC,OAAQ"} -------------------------------------------------------------------------------- /dist/index.umd.js: -------------------------------------------------------------------------------- 1 | !function(i,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(i.cssTransit={})}(this,function(i){function e(i,e,n,t){for(var c in e)if(!n||"display"!=c){var r=e[c]instanceof Function?e[c](i,t):e[c];i.style[c]=r}}i.cssTransition=function(i,n,t,c,r){var u=Array.isArray(i)?i:[i],o="object"==typeof c?t:null,a=o?c:t,b=(o?r:c)||0;return u.forEach(function(i,n){i.style.transition="none",i.removeEventListener("transitionend",i.__onTransitionEnd),o&&e(i,o,!1,n)}),u[0].offsetWidth=u[0].offsetWidth,u.forEach(function(i,t){i.style.transition="all",i.style.transitionDuration=n+"ms",i.style.transitionTimingFunction=a.ease?a.ease:"ease",i.style.transitionDelay=(a.delay?a.delay:0)+b*t+"ms",e(i,a,!0,t)}),new Promise(function(i){var e=u[u.length-1];e.__onTransitionEnd=function(n){n.target===e&&(n.target.removeEventListener("transitionend",n.target.__onTransitionEnd),a.display&&u.forEach(function(i,e){i.style.display=a.display}),a.clearStyle&&u.forEach(function(i,e){i.removeAttribute("style")}),i())},e.addEventListener("transitionend",e.__onTransitionEnd)})},i.ease={inQuad:"cubic-bezier(0.550, 0.085, 0.680, 0.530)",inCubic:"cubic-bezier(0.550, 0.055, 0.675, 0.190)",inQuart:"cubic-bezier(0.895, 0.030, 0.685, 0.220)",inQuint:"cubic-bezier(0.755, 0.050, 0.855, 0.060)",inSine:"cubic-bezier(0.470, 0.000, 0.745, 0.715)",inExpo:"cubic-bezier(0.950, 0.050, 0.795, 0.035)",inCirc:"cubic-bezier(0.600, 0.040, 0.980, 0.335)",inBack:"cubic-bezier(0.600, -0.280, 0.735, 0.045)",outQuad:"cubic-bezier(0.250, 0.460, 0.450, 0.940)",outCubic:"cubic-bezier(0.215, 0.610, 0.355, 1.000)",outQuart:"cubic-bezier(0.165, 0.840, 0.440, 1.000)",outQuint:"cubic-bezier(0.230, 1.000, 0.320, 1.000)",outSine:"cubic-bezier(0.390, 0.575, 0.565, 1.000)",outExpo:"cubic-bezier(0.190, 1.000, 0.220, 1.000)",outCirc:"cubic-bezier(0.075, 0.820, 0.165, 1.000)",outBack:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",inOutQuad:"cubic-bezier(0.455, 0.030, 0.515, 0.955)",inOutCubic:"cubic-bezier(0.645, 0.045, 0.355, 1.000)",inOutQuart:"cubic-bezier(0.770, 0.000, 0.175, 1.000)",inOutQuint:"cubic-bezier(0.860, 0.000, 0.070, 1.000)",inOutSine:"cubic-bezier(0.445, 0.050, 0.550, 0.950)",inOutExpo:"cubic-bezier(1.000, 0.000, 0.000, 1.000)",inOutCirc:"cubic-bezier(0.785, 0.135, 0.150, 0.860)",inOutBack:"cubic-bezier(0.680, -0.550, 0.265, 1.550)",linear:"linear"}}); 2 | //# sourceMappingURL=index.umd.js.map 3 | -------------------------------------------------------------------------------- /dist/index.umd.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.umd.js","sources":["../source/css-transition.js","../source/ease.js"],"sourcesContent":["function setStyles(el, styles, isTo, i) {\n for (var prop in styles) {\n if (isTo && prop == 'display') continue\n const val = (styles[prop] instanceof Function) ? styles[prop](el, i) : styles[prop]\n el.style[prop] = val\n }\n}\n\nfunction cssTransition(target, time, arg1, arg2, arg3) {\n var els = Array.isArray(target) ? target : [target]\n var from = typeof arg2 === 'object' ? arg1 : null\n var to = from ? arg2 : arg1\n var staggerDelay = (from ? arg3 : arg2) || 0\n\n els.forEach((el, i) => {\n el.style.transition = 'none'\n el.removeEventListener('transitionend', el.__onTransitionEnd)\n\n if (from) {\n setStyles(el, from, false, i)\n }\n })\n\n els[0].offsetWidth = els[0].offsetWidth // trigger layout\n\n els.forEach((el, i) => {\n el.style.transition = 'all'\n el.style.transitionDuration = time + 'ms'\n el.style.transitionTimingFunction = to.ease ? to.ease : 'ease'\n el.style.transitionDelay = ((to.delay ? to.delay : 0) + (staggerDelay * i)) + 'ms'\n setStyles(el, to, true, i)\n })\n\n return new Promise((resolve) => {\n var transitionTarget = els[els.length - 1]\n transitionTarget.__onTransitionEnd = function(event) {\n if (event.target === transitionTarget) {\n event.target.removeEventListener('transitionend', event.target.__onTransitionEnd)\n if (to.display) els.forEach((el, i) => { el.style.display = to.display })\n if (to.clearStyle) els.forEach((el, i) => { el.removeAttribute('style') })\n resolve()\n }\n }\n transitionTarget.addEventListener('transitionend', transitionTarget.__onTransitionEnd)\n })\n}\n\nexport {\n cssTransition\n}","/*\n Easing functions that can be used by the css animation library.\n*/\nconst ease = {\n inQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n inCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n inQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n inQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n inSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n inExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n inCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n inBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n\n outQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n outCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n outQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n outQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n outSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n outExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n outCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n outBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n\n inOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n inOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n inOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n inOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n inOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n inOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n inOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n\n linear: 'linear'\n}\n\nexport {\n ease\n}"],"names":["setStyles","el","styles","isTo","i","prop","val","Function","style","target","time","arg1","arg2","arg3","els","Array","isArray","from","to","staggerDelay","forEach","transition","removeEventListener","__onTransitionEnd","offsetWidth","transitionDuration","transitionTimingFunction","ease","transitionDelay","delay","Promise","resolve","transitionTarget","length","event","display","clearStyle","removeAttribute","addEventListener","inQuad","inCubic","inQuart","inQuint","inSine","inExpo","inCirc","inBack","outQuad","outCubic","outQuart","outQuint","outSine","outExpo","outCirc","outBack","inOutQuad","inOutCubic","inOutQuart","inOutQuint","inOutSine","inOutExpo","inOutCirc","inOutBack","linear"],"mappings":"gLAAA,SAASA,EAAUC,EAAIC,EAAQC,EAAMC,OAC9B,IAAIC,KAAQH,MACXC,GAAgB,WAARE,OACNC,EAAOJ,EAAOG,aAAiBE,SAAYL,EAAOG,GAAMJ,EAAIG,GAAKF,EAAOG,GAC9EJ,EAAGO,MAAMH,GAAQC,mBAIrB,SAAuBG,EAAQC,EAAMC,EAAMC,EAAMC,OAC3CC,EAAMC,MAAMC,QAAQP,GAAUA,EAAS,CAACA,GACxCQ,EAAuB,iBAATL,EAAoBD,EAAO,KACzCO,EAAKD,EAAOL,EAAOD,EACnBQ,GAAgBF,EAAOJ,EAAOD,IAAS,SAE3CE,EAAIM,iBAASnB,EAAIG,GACfH,EAAGO,MAAMa,WAAa,OACtBpB,EAAGqB,oBAAoB,gBAAiBrB,EAAGsB,mBAEvCN,GACFjB,EAAUC,EAAIgB,GAAM,EAAOb,KAI/BU,EAAI,GAAGU,YAAcV,EAAI,GAAGU,YAE5BV,EAAIM,iBAASnB,EAAIG,GACfH,EAAGO,MAAMa,WAAa,MACtBpB,EAAGO,MAAMiB,mBAAqBf,EAAO,KACrCT,EAAGO,MAAMkB,yBAA2BR,EAAGS,KAAOT,EAAGS,KAAO,OACxD1B,EAAGO,MAAMoB,iBAAoBV,EAAGW,MAAQX,EAAGW,MAAQ,GAAMV,EAAef,EAAM,KAC9EJ,EAAUC,EAAIiB,GAAI,EAAMd,KAGnB,IAAI0B,iBAASC,OACdC,EAAmBlB,EAAIA,EAAImB,OAAS,GACxCD,EAAiBT,kBAAoB,SAASW,GACxCA,EAAMzB,SAAWuB,IACnBE,EAAMzB,OAAOa,oBAAoB,gBAAiBY,EAAMzB,OAAOc,mBAC3DL,EAAGiB,SAASrB,EAAIM,iBAASnB,EAAIG,GAAQH,EAAGO,MAAM2B,QAAUjB,EAAGiB,UAC3DjB,EAAGkB,YAAYtB,EAAIM,iBAASnB,EAAIG,GAAQH,EAAGoC,gBAAgB,WAC/DN,MAGJC,EAAiBM,iBAAiB,gBAAiBN,EAAiBT,6BCxC3D,CACXgB,OAAQ,2CACRC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,2CACRC,OAAQ,4CAERC,QAAS,2CACTC,SAAU,2CACVC,SAAU,2CACVC,SAAU,2CACVC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CACTC,QAAS,2CAETC,UAAW,2CACXC,WAAY,2CACZC,WAAY,2CACZC,WAAY,2CACZC,UAAW,2CACXC,UAAW,2CACXC,UAAW,2CACXC,UAAW,4CAEXC,OAAQ"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-transit", 3 | "version": "1.2.0", 4 | "description": "A tiny library for fast, smooth, and controllable CSS transitions.", 5 | "main": "dist/index.js", 6 | "directories": {}, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "build": "microbundle source/index.js", 10 | "watch": "microbundle watch source/index.js" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "microbundle": "^0.11.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /source/css-transition.js: -------------------------------------------------------------------------------- 1 | function setStyles(el, styles, isTo, i) { 2 | for (var prop in styles) { 3 | if (isTo && prop == 'display') continue 4 | const val = (styles[prop] instanceof Function) ? styles[prop](el, i) : styles[prop] 5 | el.style[prop] = val 6 | } 7 | } 8 | 9 | function cssTransition(target, time, arg1, arg2, arg3) { 10 | var els = Array.isArray(target) ? target : [target] 11 | var from = typeof arg2 === 'object' ? arg1 : null 12 | var to = from ? arg2 : arg1 13 | var staggerDelay = (from ? arg3 : arg2) || 0 14 | 15 | els.forEach((el, i) => { 16 | el.style.transition = 'none' 17 | el.removeEventListener('transitionend', el.__onTransitionEnd) 18 | 19 | if (from) { 20 | setStyles(el, from, false, i) 21 | } 22 | }) 23 | 24 | els[0].offsetWidth = els[0].offsetWidth // trigger layout 25 | 26 | els.forEach((el, i) => { 27 | el.style.transition = 'all' 28 | el.style.transitionDuration = time + 'ms' 29 | el.style.transitionTimingFunction = to.ease ? to.ease : 'ease' 30 | el.style.transitionDelay = ((to.delay ? to.delay : 0) + (staggerDelay * i)) + 'ms' 31 | setStyles(el, to, true, i) 32 | }) 33 | 34 | return new Promise((resolve) => { 35 | var transitionTarget = els[els.length - 1] 36 | transitionTarget.__onTransitionEnd = function(event) { 37 | if (event.target === transitionTarget) { 38 | event.target.removeEventListener('transitionend', event.target.__onTransitionEnd) 39 | if (to.display) els.forEach((el, i) => { el.style.display = to.display }) 40 | if (to.clearStyle) els.forEach((el, i) => { el.removeAttribute('style') }) 41 | resolve() 42 | } 43 | } 44 | transitionTarget.addEventListener('transitionend', transitionTarget.__onTransitionEnd) 45 | }) 46 | } 47 | 48 | export { 49 | cssTransition 50 | } -------------------------------------------------------------------------------- /source/ease.js: -------------------------------------------------------------------------------- 1 | /* 2 | Easing functions that can be used by the css animation library. 3 | */ 4 | const ease = { 5 | inQuad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', 6 | inCubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)', 7 | inQuart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)', 8 | inQuint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', 9 | inSine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)', 10 | inExpo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)', 11 | inCirc: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)', 12 | inBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)', 13 | 14 | outQuad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 15 | outCubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', 16 | outQuart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', 17 | outQuint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)', 18 | outSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', 19 | outExpo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)', 20 | outCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)', 21 | outBack: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)', 22 | 23 | inOutQuad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', 24 | inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', 25 | inOutQuart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)', 26 | inOutQuint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)', 27 | inOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)', 28 | inOutExpo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)', 29 | inOutCirc: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)', 30 | inOutBack: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)', 31 | 32 | linear: 'linear' 33 | } 34 | 35 | export { 36 | ease 37 | } -------------------------------------------------------------------------------- /source/index.js: -------------------------------------------------------------------------------- 1 | import { cssTransition } from './css-transition' 2 | import { ease } from './ease' 3 | 4 | export { 5 | cssTransition, 6 | ease 7 | } --------------------------------------------------------------------------------