Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

checkbox: support disabling all animations #10819

Open
nikclayton opened this issue Jul 27, 2017 · 1 comment
Open

checkbox: support disabling all animations #10819

nikclayton opened this issue Jul 27, 2017 · 1 comment
Assignees
Labels
g3: reported The issue was reported by an internal or external product team. hotlist: animations P3: important Important issues that really should be fixed when possible. severity: performance This issue causes a significant performance degradation type: enhancement
Milestone

Comments

@nikclayton
Copy link

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
@kara kara added the g3: reported The issue was reported by an internal or external product team. label Jul 27, 2017
@ThomasBurleson ThomasBurleson added this to the 1.1.5 milestone Jul 27, 2017
@ThomasBurleson ThomasBurleson added the P1: urgent Urgent issues that should be addressed in the next minor or patch release. label Jul 27, 2017
@ThomasBurleson ThomasBurleson modified the milestones: 1.1.5, 1.1.6 Sep 5, 2017
@Splaktar Splaktar modified the milestones: 1.1.6, 1.1.7 Jan 17, 2018
@Splaktar Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community needs: Pull Request labels Jan 29, 2018
@Splaktar Splaktar modified the milestones: 1.1.7, 1.1.8 Jan 29, 2018
@Splaktar Splaktar modified the milestones: 1.1.8, 1.1.9 Mar 16, 2018
@Splaktar Splaktar modified the milestones: 1.1.9, 1.1.10 Apr 19, 2018
@Splaktar Splaktar modified the milestones: 1.1.10, 1.1.11 Jun 19, 2018
@Splaktar Splaktar modified the milestones: 1.1.11, 1.1.12 Sep 24, 2018
@Splaktar Splaktar modified the milestones: 1.1.12, 1.1.13 Jan 3, 2019
@Splaktar Splaktar changed the title ngmaterial 1.1 / md-checkbox focus animation fires when focus is gained, even if animation is disabled checkbox: focus animation fires when focus is gained, even if animation is disabled Jan 22, 2019
@Splaktar Splaktar self-assigned this Jan 22, 2019
@Splaktar
Copy link
Contributor

This is related to #865 and #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.

@Splaktar Splaktar added type: enhancement and removed P1: urgent Urgent issues that should be addressed in the next minor or patch release. labels Jan 22, 2019
@Splaktar Splaktar added P3: important Important issues that really should be fixed when possible. hotlist: animations and removed needs: Pull Request needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Jan 22, 2019
@Splaktar Splaktar changed the title checkbox: focus animation fires when focus is gained, even if animation is disabled checkbox: support disabling all animations Jan 22, 2019
Splaktar added a commit that referenced this issue Jan 22, 2019
@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, g3: sync Feb 15, 2019
@Splaktar Splaktar modified the milestones: g3: sync, 1.1.23, 1.2.1 Apr 30, 2020
@Splaktar Splaktar modified the milestones: 1.2.1, 1.2.0 May 12, 2020
@Splaktar Splaktar modified the milestones: 1.2.0, 1.2.1 Jul 29, 2020
@Splaktar Splaktar added the severity: performance This issue causes a significant performance degradation label Sep 13, 2020
@Splaktar Splaktar modified the milestones: 1.2.1, 1.2.2 Sep 14, 2020
@Splaktar Splaktar modified the milestones: 1.2.2, - Backlog Dec 16, 2020
@Splaktar Splaktar removed the g3: sync label Apr 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
g3: reported The issue was reported by an internal or external product team. hotlist: animations P3: important Important issues that really should be fixed when possible. severity: performance This issue causes a significant performance degradation type: enhancement
Projects
None yet
Development

No branches or pull requests

5 participants