anchor.diff:    different transitions for entering and leaving based on what the state of the hero
     is:
   
  +  Nous pouvons également combiner cette animation avec les animations de changement d'état précédentes en utilisant l'état du héros comme état de l'animation.
  +  Cela nous permettra de configurer différentes transitions pour entrer et sortir en se basant sur l'état courant du héros&nbsp;:
  +
     * Inactive hero enter: `void => inactive`
     * Active hero enter: `void => active`
     * Inactive hero leave: `inactive => void`
     * Active hero leave: `active => void`
   
  +  * Entrée d'un héros inactif&nbsp; `void => inactive`
  +  * Entrée d'un héros actif&nbsp; `void => active`
  +  * Sortie d'un héros inactif&nbsp; `inactive => void`
  +  * Sortie d'un héros actif&nbsp; `active => void`
  +
     We now have fine-grained control over each transition:
  +
  +  Nous avons maintenant un contrôle précis sur chaque transition&nbsp;:
   
   figure.image-display
     img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400")
  
positive.code:   to have widths and heights that depend on their content and the screen size. These
    properties are often tricky to animate with CSS.
  
    With Angular we can use a special `*` property value in these cases. What it means
    is that the value of this property will be computed at runtime and then plugged into
    the animation.
  
    The "leave" animation in this example takes whatever height the element has before it
    leaves and animates from that height to zero:
  
  +makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".")
  
  :marked
    ## Animation Timing
  
    There are three timing properties we can tune for every animated transition:
    The duration, the delay, and the easing function. They are all combined into
    a single transition *timing string*.
  
    ### Duration
  
    The duration controls how long the animation takes to run from start to finish.
    We can define a duration in three ways:
  
    * As a plain number, in milliseconds: `100`
    * In a string, as milliseconds: `'100ms'`
    * In a string, as seconds: `'0.1s'`
  
    ### Delay
  
    The delay controls how long to wait after an animation triggers before the
    transition actually begins. We can define one by adding it in the same string
    following the duration. It also has the same format options as the duration:
  
    * Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
  
    ### Easing
  
  
negative.code:   attribute to the expression `hero.state`. We expect it to always be either `inactive`
    or `active`, since that's what we have defined animation states for.
  
    Nous avons appliqué ici un déclencheur d'animation à chaque élément répété par un `ngFor`.
    Chacun des éléments répétés sera animé indépendamment.
    Nous rattachons la valeur de l'attribut à l'expression `hero.state`.
    Nous prévoyons qu'elle sera toujours `inactive` ou `active`, étant donné que ce sont les valeurs pour lesquelles nous avons définis des états d'animation.
  
    With this setup, an animated transition is shown whenever a hero object changes state!
    Here's the full component implementation:
  
    Avec cette configuration, une transition animée a lieu à chaque fois qu'un héros change d'état&nbsp;!
    Voici l'implémentation complète du composant&nbsp;:
  
  +makeExample('animations/ts/app/hero-list-basic.component.ts')
  
  :marked
    ## States and Transitions
  
    ## États et Transitions
  
    Angular animations are defined in terms of logical **states** and **transitions**
    between states.
  
    Les animations Angular sont définies en termes d'**états** logiques et de **transitions** entre états.
  
    An animation state is a string value that we define in our application code. In the example
    above we used the states `'active'` and `'inactive'` based on the logical state of
  