Skip to content

Commit 29936b3

Browse files
committed
update component transition control docs
1 parent 8600e33 commit 29936b3

File tree

1 file changed

+15
-6
lines changed

1 file changed

+15
-6
lines changed

source/guide/components.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -329,19 +329,26 @@ If you want to keep the switched-out components alive so that you can preserve i
329329
</component>
330330
```
331331

332-
### Transition Control
332+
## Transition Control
333333

334-
There are two additional attribute parameters that allows advanced control of how dynamic components should transition from one to another.
334+
There are two additional param attributes that allows advanced control of how components should be rendered / transitioned.
335335

336-
#### `wait-for`
336+
### `wait-for`
337337

338-
An event name to wait for on the incoming child component before switching it with the current component. This allows you to wait for asynchronous data to be loaded before triggering the transition to avoid unwanted flash of emptiness in between.
338+
An event name to wait for on the incoming child component before inserting it into the DOM. This allows you to wait for asynchronous data to be loaded before triggering the transition and avoid displaying empty content.
339+
340+
This attribute can be used both on static and dynamic components. Note: for dynamic components, all components that will potentially get rendered must `$emit` the awaited event, otherwise they will never get inserted.
339341

340342
**Example:**
341343

342344
``` html
345+
<!-- static -->
346+
<my-component wait-for="data-loaded"></my-component>
347+
348+
<!-- dynamic -->
343349
<component is="{{view}}" wait-for="data-loaded"></component>
344350
```
351+
345352
``` js
346353
// component definition
347354
{
@@ -360,9 +367,11 @@ An event name to wait for on the incoming child component before switching it wi
360367
}
361368
```
362369

363-
#### `transition-mode`
370+
### `transition-mode`
371+
372+
The `transition-mode` param attribute allows you to specify how the transition between two dynamic components should be executed.
364373

365-
By default, the transitions for incoming and outgoing components happen simultaneously. This param allows you to configure two other modes:
374+
By default, the transitions for incoming and outgoing components happen simultaneously. This attribute allows you to configure two other modes:
366375

367376
- `in-out`: New component transitions in first, current component transitions out after incoming transition has finished.
368377
- `out-in`: Current component transitions out first, new componnent transitions in after outgoing transition has finished.

0 commit comments

Comments
 (0)