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

Commit

Permalink
fix(toolbar): remove transition duration for $ngAnimate
Browse files Browse the repository at this point in the history
* Other components, like `md-toolbar` use a custom transition on the background-color, color etc, but the related CSS selector has a high specificity.

* So for example, when ng-hide is applied, then we set the transition to `none`.
But that's not working sometimes, because the both selectors have the same specificity.

To fix this, we can apply `!important` or increase the selector specificity by using a CSS hack.

https://www.w3.org/TR/CSS2/cascade.html#specificity

The toolbar selector has in our case a specificity of 20.
* .md-button.ng-hide // 0,0,2,0
* .md-toolbar-tools .md-button // 0,0,2,0

------
So this is actually a thing, which is caused by $ngAnimate, which is not
able to solve this issue.

We need to reset the transition duration, when $ngAnimate looks for it,
manually.

$ngAnimate Issue: angular/angular.js#8224 (comment)

Fixes #7929

Closes #8190
  • Loading branch information
devversion authored and ThomasBurleson committed Apr 25, 2016
1 parent 3e15998 commit 9ef50a7
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 2 deletions.
3 changes: 3 additions & 0 deletions src/components/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ button.md-button::-moz-focus-inner {
text-decoration: none;
}

// By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
// The .md-button has a transition duration applied, which means, that $ngAnimate delays the hide process.
// To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
&.ng-hide, &.ng-leave {
transition: none;
}
Expand Down
20 changes: 18 additions & 2 deletions src/components/toolbar/toolbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ md-toolbar {
min-height: $baseline-grid * 8;
width: 100%;

transition: $swift-ease-in-out;
transition-duration: $swift-ease-in-out-duration;
transition-timing-function: $swift-ease-in-out-timing-function;
transition-property: background-color, fill, color;

&.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
Expand All @@ -47,6 +48,13 @@ md-toolbar {
box-sizing: border-box;
}

// By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
// The toolbar has a transition duration applied, which means, that $ngAnimate delays the hide process.
// To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
&.ng-animate {
transition: none;
}

&.md-tall {
height: $toolbar-tall-height;
min-height: $toolbar-tall-height;
Expand Down Expand Up @@ -116,8 +124,16 @@ md-toolbar {
margin-bottom: 0;

&, &.md-icon-button md-icon {
transition: $swift-ease-in-out;
transition-duration: $swift-ease-in-out-duration;
transition-timing-function: $swift-ease-in-out-timing-function;
transition-property: background-color, fill, color;

// Normally .md-button is already resetting the transition, when $ngAnimate looks for the duration,
// but in this case, the selector has a higher specificity than the `reset selector`, which means, that
// we need to reset the transition our self.
&.ng-animate {
transition: none;
}
}
}
&> .md-button:first-child {
Expand Down

0 comments on commit 9ef50a7

Please sign in to comment.