linkanimation

linkDescription

animation is an animation-specific function that is designed to be used inside of Angular's animation DSL language.

var myAnimation = animation(...) is designed to produce a reusable animation that can be later invoked in another animation or sequence. Reusable animations are designed to make use of animation parameters and the produced animation can be used via the useAnimation method.

      
        content_copy
      
      var fadeAnimation = animation([
  style({ opacity: '{{ start }}' }),
  animate('{{ time }}',
    style({ opacity: '{{ end }}'}))
], { params: { time: '1000ms', start: 0, end: 1 }});
    

If parameters are attached to an animation then they act as default parameter values. When an animation is invoked via useAnimation then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.

      
        content_copy
      
      useAnimation(fadeAnimation, {
  params: {
    time: '2s',
    start: 1,
    end: 0
  }
})
    

If one or more parameter values are missing before animated then an error will be thrown.