[DOC] Fix animation documentation (#783)

The documentation was a bit missleading around which and when css
classes were added to the DOM.
Also added a scss mixin usage exemple.

Co-authored-by: Simon Genin (ges) <ges@odoo.com>

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),
+  transition effects).
-- the css class `name-enter-active` will be removed whenever a css transition
+- at the end of the transition, `name-enter-to` and `name-enter-active` will be removed.
-  ends.
 
 At node destruction:
 
 - the css classes `name-leave` and `name-leave-active` will be added before the
-  node is removed to the DOM,
+  node is removed to the DOM.
-- the css class `name-leave` will be removed on the next animation frame (so it
+- on the next animation frame: the css class `name-leave` will be removed and the
-  can be used to trigger css transition effects),
+  class `name-leave-to` will be added (so they can be used to trigger css
-- the css class `name-leave-active` will be removed whenever a css transition
+  transition effects).
-  ends. Only then will the element be removed from the DOM.
+- 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
+<SomeTag  t-transition="o_notification_fade"/>
+```