mist.js
v0.8.9
Published
Motion Design in Modular CSS
Downloads
5
Maintainers
Readme
MIST
Motion Design in Modular CSS
Mist is a motion design library in modular CSS
Quick start
npm install mist.js --save
Or download
Features
- Using Modular CSS
- Using Style Tag
- Timing Control
Supported browser
- Chrome
- Edge
- Firefox
- IE
- Safari
Usage
Make modular CSS
var vivid = {
background: () => `hsl(${Math.random() * 360}, 50%, 50%)`
}
Design motion
mist('div')
// set color, wait 1s
.set(vivid).time(1000)
// set color, wait 1s
.set(vivid).time(1000)
// clear style
.clear();
Repeat this two-step, to build an interaction
mist( statement ): new
param | type
--------- | ----------------------------
statement | selector string
, element
new | new mist
New instance
API
Selector
Using Modular CSS, Style Tag
Timing Control
Utility
any( selector ): new
param | type
-------- | ----------
selector | string
new | new mist
Same as :any, :matches selector
not( selector ): new
param | type
-------- | ----------
selector | string
new | new mist
Same as :not selector
clear(): self
Clear modular CSS
clearAll(): self
Clear modular CSS each element
set( ...css ): self
param | type
------- | ---------------------------------------------------
css | { "name": string }
, { "name": (now) => string }
Set modular CSS
setAll( ...css ): self
param | type
------- | ---------------------------------------------------------------
css | { "name": string }
, { "name": (element, i, all) => string }
Set modular CSS each element
on( name ): promise
param | type
------- | ---------------------
name | string
promise | see
Listen event emission
pause(): self
Pause CSS transition, time
resume(): self
Resume CSS transition, time
time( dur ): self
param | type
------- | ---------------------
dur | milliseconds number
Delay execution
call( responsor ): self
param | type
--------- | ------------
responsor | () => void
Call passed function
Using promise
This library's promise like a Promise / A+, it's extended functions
resume()
The fullfilled or rejected promise back to pending
var emission = mist('div').on('click');
emission.then((e) => {
// your process
emission.resume();
});
when( success, err? ): promise
param | type
------- | -------------------
success | (response) => any
err | (response) => any
If you want to reuse callback function, to use
mist('div').on('click').when((e) => {
// your process
});
License
MIT © AI428