anchor.diff:    * Inactive hero leave: `inactive => void`
     * Active hero leave: `active => void`
   
  -  We now have fine-grained control over each transition:
  +  This gives you fine-grained control over each transition:
   
   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: 
    ### 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'`
  
negative.code: +makeExample('animations/ts/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".")
  
  :marked
    Note that in this case the styles are applied to the void state directly in the
    transition definitions, and not in a separate `state(void)` definition. Thus, the transforms
    are different on enter and leave: the element enters from the left
    and leaves to the right.
  
    ## Example: Entering and leaving from different states
  figure
    img(src="/resources/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px" )
  :marked
    You can also combine this animation with the earlier state transition animation by
    using the hero state as the animation state. This lets you configure
    different transitions for entering and leaving based on what the state of the hero
    is:
  
  