Multiple Choice Questions - Angular 4 Animations

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it. [Via]

Answer the below quiz questions on Angular Animations and check your knowledge on the topic.

1. To make your applications ready for animations, you must include the AngularJS Animate library and then you must refer to the . . . . . module in your application.

A) ng-repeat
B) ngAnimation
C) ngAnimate
D) None of above

2. Using the . . . . . . animation function, the parent animation can allow the child animation to run at the exact correct time.

A) animateChild
B) childAnimate
C) animateInner
D) innerChild

3. Options as well as input params can also be passed into an animation binding value when the animation kicks off.

A) True
B) False

4. Animations are fired using animation property bindings which are prefixed with an . . . . symbol.

A) &
B) #
C) $
D) @

5. . . . . . . allows for child elements to be collected and animated against a bunch of animation steps. We can now grab inner elements and make a really cool multi-element animation sequence.

A) child()
B) query()
C) stagger()
D) animate()

6. [Choose all which are correct]
The major addition to the animation DSL in Angular 4.2 is the ability to configure/override options for each of the step-based animation methods. These methods are:

A) sequence([...], { /* options */ })
B) groups([...], { /* options */ })
C) trigger([...], { /* options */ })
D) transition([...], { /* options */ })

7. . . . . . . is an animation-specific function that is designed to be used inside of Angular's animation DSL language. It is used to kick off a reusable animation that is created using animation().

A) useAnimation
B) reuseAnimation
C) in-useAnimation
D) All of above

8. With ngAnimate module you can add CSS but not JavaScript-based animations to your projects.

A) True
B) False

9. It's always possible to make use of animation input parameters by setting even more data via the . . . . . property.

A) options.param
B) option.params
C) option.param
D) options.params

10. . . . . . reverts all the used styles in the animation back to their end state value.

A) styles("*")
B) style("+")
C) style("*")
D) style("#")

Answers

1) c, 2) a, 3) a, 4) d, 5) b, 6) a,c,d, 7) a, 8) b, 9) d, 10) c