Motion Design in Modular CSS
Mist is a motion design library in modular CSS
npm install mist.js --save
Or download
- Using Modular CSS
- Using Style Tag
- Timing Control
- Chrome
- Edge
- Firefox
- IE
- Safari
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
param | type |
---|---|
statement | selector string , element
|
new | new mist
|
New instance
-
Selector
-
Using Modular CSS, Style Tag
-
Timing Control
-
Utility
param | type |
---|---|
selector | string |
new | new mist
|
Same as :any, :matches selector
param | type |
---|---|
selector | string |
new | new mist
|
Same as :not selector
Clear modular CSS
Clear modular CSS each element
param | type |
---|---|
css |
{ "name": string } , { "name": (now) => string }
|
Set modular CSS
param | type |
---|---|
css |
{ "name": string } , { "name": (element, i, all) => string }
|
Set modular CSS each element
param | type |
---|---|
name | string |
promise | see |
Listen event emission
Pause CSS transition, time
Resume CSS transition, time
param | type |
---|---|
dur | milliseconds number
|
Delay execution
param | type |
---|---|
responsor | () => void |
Call passed function
This library's promise like a Promise / A+, it's extended functions
The fullfilled or rejected promise back to pending
var emission = mist('div').on('click');
emission.then((e) => {
// your process
emission.resume();
});
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
});
MIT © AI428