mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
+2
-1
@@ -38,7 +38,8 @@ keyboard) the button.
|
||||
A more complex situation occurs when we want to transition an element in or out
|
||||
of the page. For example, we may want a fade-in and fade-out effect.
|
||||
|
||||
The `t-transition` directive is here to help us (see [QWeb documentation](qweb.md#t-transition-directive)).
|
||||
The `t-transition` directive is here to help us. It works on html elements and
|
||||
on components, by adding and removing some css classes.
|
||||
|
||||
To perform useful transition effects, whenever an element appears or disappears,
|
||||
it is necessary to add/remove some css style or class at some precise moment in
|
||||
|
||||
+7
-7
@@ -14,7 +14,7 @@
|
||||
- [`t-key` directive](#t-key-directive)
|
||||
- [`t-mounted` directive](#t-mounted-directive)
|
||||
- [Props Validation](#props-validation)
|
||||
- [Keeping References](#keeping-references])
|
||||
- [Keeping References](#keeping-references)
|
||||
- [Asynchronous rendering](#asynchronous-rendering)
|
||||
|
||||
## Overview
|
||||
@@ -160,13 +160,13 @@ a owl component:
|
||||
|
||||
| Method | Description |
|
||||
| ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| **[constructor](#constructor)** | constructor |
|
||||
| **[willStart](#willStart)** | async, before first rendering |
|
||||
| **[constructor](#constructorparent-props)** | constructor |
|
||||
| **[willStart](#willstart)** | async, before first rendering |
|
||||
| **[mounted](#mounted)** | just after component is rendered and added to the DOM |
|
||||
| **[willUpdateProps](#willupdatepropsnextprops)** | async, before props update |
|
||||
| **[willPatch](#willpatch)** | just before the DOM is patched |
|
||||
| **[patched](#patchedsnapshot)** | just after the DOM is patched |
|
||||
| **[willUnmount](#willUnmount)** | just before removing component from DOM |
|
||||
| **[willUnmount](#willunmount)** | just before removing component from DOM |
|
||||
|
||||
Notes:
|
||||
|
||||
@@ -370,7 +370,7 @@ Note that there are some restrictions on prop names: `class`, `style` and any
|
||||
string which starts with `t-` are not allowed.
|
||||
|
||||
The `t-widget` directive also accepts dynamic values with string interpolation
|
||||
(like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) directive):
|
||||
(like the [`t-attf-`](qweb.md#dynamic-attributes) directive):
|
||||
|
||||
```xml
|
||||
<div t-name="ParentWidget">
|
||||
@@ -736,8 +736,8 @@ Note: if used on a component, the reference will be set in the `refs`
|
||||
variable between `willPatch` and `patched`.
|
||||
|
||||
The `t-ref` directive also accepts dynamic values with string interpolation
|
||||
(like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) and
|
||||
[`t-widget-`](#component-t-widget) directives). For example, if we have
|
||||
(like the [`t-attf-`](qweb.md#dynamic-attributes) and
|
||||
`t-widget` directives). For example, if we have
|
||||
`id` set to 44 in the rendering context,
|
||||
|
||||
```xml
|
||||
|
||||
+2
-2
@@ -5,7 +5,7 @@
|
||||
- [Overview](#overview)
|
||||
- [Directives](#directives)
|
||||
- [QWeb Engine](#qweb-engine)
|
||||
- [Reference](#qweb-specification)
|
||||
- [Reference](#reference)
|
||||
- [White spaces](#white-spaces)
|
||||
- [Root nodes](#root-nodes)
|
||||
- [Expression evaluation](#expression-evaluation)
|
||||
@@ -72,7 +72,7 @@ needs. Here is a list of all Owl specific directives:
|
||||
| `t-key` | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
|
||||
| `t-on-*` | [Event handling](component.md#event-handling) |
|
||||
| `t-transition` | [Defining an animation](animations.md#css-transitions) |
|
||||
| `t-mounted` | [Callback when a node or component is mounted](#component.md#t-mounted-directive) |
|
||||
| `t-mounted` | [Callback when a node or component is mounted](component.md#t-mounted-directive) |
|
||||
|
||||
## QWeb Engine
|
||||
|
||||
|
||||
Reference in New Issue
Block a user