65 lines
1.6 KiB
Markdown
65 lines
1.6 KiB
Markdown
|
# Configuration
|
||
|
|
|
||
|
|
Motion UI has six variables which store all of the library's settings. Each is a map of keys and values.
|
||
|
|
|
||
|
|
## States
|
||
|
|
|
||
|
|
```scss
|
||
|
|
$motion-ui-states: (
|
||
|
|
in: 'enter',
|
||
|
|
out: 'leave',
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
Motion UI defines two motion states: `in` and `out`, which create classes with the words `enter` and `leave` respectively.
|
||
|
|
|
||
|
|
## Classes
|
||
|
|
|
||
|
|
```scss
|
||
|
|
$motion-ui-classes: (
|
||
|
|
chain: true,
|
||
|
|
prefix: 'mui-',
|
||
|
|
active: '-active',
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
Different animation libraries have different ways of writing classes, but most libraries require a setup class, as well as an active class to trigger a transition or animation.
|
||
|
|
|
||
|
|
The default configuration outputs classes like this:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.fade-in.mui-enter {}
|
||
|
|
.fade-in.mui-enter.mui-enter-active {}
|
||
|
|
```
|
||
|
|
|
||
|
|
Set the `chain` property of `$motion-ui-classes` to `false` to create classes like this:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.fade-in-mui-enter {}
|
||
|
|
.fade-in-mui-enter.fade-in-mui-enter-active {}
|
||
|
|
```
|
||
|
|
|
||
|
|
The class output can also be fine-tuned with the `prefix` and `active` properties.
|
||
|
|
|
||
|
|
## Animation Defaults
|
||
|
|
|
||
|
|
The maps `$motion-ui-speeds`, `$motion-ui-delays`, and `$motion-ui-easings` define terms for animation speeds, delays, and timing functions. For example, the `default` speed of animations is 500ms, while `slow` is 750ms, and `fast` is 250ms.
|
||
|
|
|
||
|
|
## Other Settings
|
||
|
|
|
||
|
|
Miscellaneous settings are in the `$motion-ui-settings` map. These settings define if animations include a fade, and what class to use for triggering an animation queue.
|
||
|
|
|
||
|
|
```scss
|
||
|
|
$motion-ui-settings: (
|
||
|
|
slide-and-fade: false,
|
||
|
|
hinge-and-fade: true,
|
||
|
|
scale-and-fade: true,
|
||
|
|
spin-and-fade: true,
|
||
|
|
pause-queue-class: 'is-paused',
|
||
|
|
activate-queue-class: 'is-animating'
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|