checkbox: support disabling all animations

[nikclayton]

Actual Behavior:

With $animate.enabled(false); in effect, md-checkbox elements still show an animation when they:

• Gain the focus (eg., through the user pressing TAB to move through the controls on a form).
• Are clicked to set/clear the value (this does not happen if the control has the focus and the user presses the spacebar to set/clear the value.

This causes flaky tests when driving the browser from a script and taking screenshots to verify expected behaviour.

Quick workaround is to inject the following CSS in to the app when it's under test:

*, *:before, *:after { transition: none !important }'

It's the *:before selector that's important, as the animations are attached to a md-checkbox:before pseudo-element.

CodePen (or steps to reproduce the issue): *

https://codepen.io/anon/pen/WEvaNz

AngularJS Versions: *

• AngularJS Version: 1.6.4
• AngularJS Material Version: 1.1.4 (latest at the time of writing).

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 59.0.3071.115 (Official Build) (64-bit)
• OS: * Ubuntu 14.04
• Stack Traces: N/A

[Splaktar]

This is related to https://github.com/angular/material/issues/865 and https://github.com/angular/material/issues/864.

md-checkbox does not use $animate, so that approach won't work.

$mdInkRippleProvider.disableInkRipple(); disables all ink ripples in the app including md-checkbox. However this only covers the ink ripples and not the focus or check/uncheck animations.

md-ink-ripple="false" should disable the ink ripple for when placed on the element, but it does not appear to work on md-checkbox.

md-checkbox has a md-no-ink API which disables the ink ripple, but not the focus or check/uncheck animations.

I did some experimentation with the CodePen and found that the $animate.enabled(false) call doesn't seem to have an effect on the state of md-checkbox, but calling it on the element specifically does. However, this doesn't have the desired effect since md-checkbox does not use $animate.

So in the end, this looks like an enhancement request to allow disabling the animations on md-checkbox via an API rather than CSS overrides.