# 🦉 Animations 🦉

Animation is a complex topic. There are many different use cases, and many
solutions and technologies. Owl only supports some basic use cases.

## Simple CSS effects

Sometimes, using pure CSS is enough. For these use cases, Owl is not really
necessary: it just needs to render a DOM element with a specific class. For
example:

```xml
<a class="btn flash" t-on-click="doSomething">Click</a>
```

with the following CSS:

```css
btn {
  background-color: gray;
}

.flash {
  transition: background 0.5s;
}

.flash:active {
  background-color: #41454a;
  transition: background 0s;
}
```

will produce a nice flash effect whenever the user click (or activate with the
keyboard) the button.

## CSS Transitions

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)).

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
the lifetime of a node. Since this is not easy to do by hand, Owl `t-transition`
directive is there to help.

Whenever a node has a `t-transition` directive, with a `name` value, the following
will happen:

At node insertion:

- the css classes `name-enter` and `name-enter-active` will be added directly
  when the node is inserted into the DOM,
- on the next animation frame: the css class `name-enter` will be removed and the
  class `name-enter-to` will be added (so they can be used to trigger css
  transition effects),
- the css class `name-enter-active` will be removed whenever a css transition
  ends.

At node destruction:

- the css classes `name-leave` and `name-leave-active` will be added before the
  node is removed to the DOM,
- the css class `name-leave` will be removed on the next animation frame (so it
  can be used to trigger css transition effects),
- the css class `name-leave-active` will be removed whenever a css transition
  ends. Only then will the element be removed from the DOM.

For example, a simple fade in/out effect can be done with this:

```xml
<div>
    <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
</div>
```

```css
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
```

The `t-transition` directive can be combined with `t-widget`.

Notes:

- more information on animations are available [here](animations.md).
- Owl does not support more than one transition on a single node, so the
  `t-transition` expression must be a single value (i.e. no space allowed)