mirror of
https://github.com/gitpitch/gitpitch.git
synced 2024-04-18 07:30:55 +08:00
38 lines
1017 B
Markdown
38 lines
1017 B
Markdown
|
# Grid Animations
|
||
|
|
|
||
|
|
The grid *animate* property is used to activate a slide animation for a [layout block](grid-layouts/drag-and-drop.md). The animation applies to the block itself and all associated block items.
|
||
|
|
|
||
|
|
?> When discussing grid layouts *content-within-blocks* are referred to as *block items*.
|
||
|
|
|
||
|
|
### Animate Activation
|
||
|
|
|
||
|
|
The following basic syntax is used to activate a *animation* behavior on a layout block:
|
||
|
|
|
||
|
|
```
|
||
|
|
[drag=width height, drop=x y, animate=type _speed]
|
||
|
|
```
|
||
|
|
|
||
|
|
Where the `type` option on the `animate=` property can take one of the following supported animation types:
|
||
|
|
|
||
|
|
- slideup
|
||
|
|
- slidedown
|
||
|
|
- slideleft
|
||
|
|
- slideright
|
||
|
|
- bounceup
|
||
|
|
- bouncedown
|
||
|
|
- bounceleft
|
||
|
|
- bounceright
|
||
|
|
- speedleft
|
||
|
|
- speedright
|
||
|
|
- tada
|
||
|
|
- flip
|
||
|
|
- fadein
|
||
|
|
- fadeout
|
||
|
|
|
||
|
|
?> The `_speed` option is optional. When specified it accepts a value of *slower* or *faster*.
|
||
|
|
|
||
|
|
Here is a short video clip that demonstrates block animation in action:
|
||
|
|
|
||
|
|
|
||
|
|
|