diff --git a/doc/reference/animations.md b/doc/reference/animations.md index d8ba2c80..ba23a586 100644 --- a/doc/reference/animations.md +++ b/doc/reference/animations.md @@ -52,21 +52,20 @@ sequence of events 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, + 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. + transition effects). +- at the end of the transition, `name-enter-to` and `name-enter-active` will be removed. 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. + node is removed to the DOM. +- on the next animation frame: the css class `name-leave` will be removed and the + class `name-leave-to` will be added (so they can be used to trigger css + transition effects). +- at the end of the transition, `name-leave-to` and `name-leave-active` will be removed. For example, a simple fade in/out effect can be done with this: @@ -93,3 +92,34 @@ Notes: 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). + +## SCSS Mixins + +If you use SCSS, you can use mixins to make generic animations. Here is an exemple with a fade in / fade out animation: + +```scss +@mixin animation-fade($time, $name) { + .#{$name}_fade-enter-active, + .#{$name}_fade-active { + transition: all $time; + } + + .#{$name}_fade-enter { + opacity: 0; + } + + .#{$name}_fade-leave-to { + opacity: 0; + } +} +``` + +Usage: +```scss +@include animation-fade(0.5s, "o_notification"); +``` + +You can now have in your template: +```xml + +```