Open nikclayton opened 7 years ago
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.
Actual Behavior:
With
$animate.enabled(false);
in effect,md-checkbox
elements still show an animation when they: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.4AngularJS Material Version:
1.1.4 (latest at the time of writing).Additional Information:
Browser Type: *
ChromeBrowser Version: *
59.0.3071.115 (Official Build) (64-bit)OS: *
Ubuntu 14.04Stack Traces:
N/A