This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Angular 1.4.* & 1.3.16 breaks md-menu enter animation #3527
Comments
|
Another component that don't behave well since 1.3.16 (and 1.4) is the md-tabs dynamic height animation Update:Bug is resolved in angular 1.4.2 (I just tried the latest version from bower - v1.4.2-build.4087+sha.e51024e) |
|
@dani3l - Please provide more information regarding the issue that you are having.
Please provide a CodePen or Plunkr that demonstrates this issue. Here are some starter demo templates that you can use/fork:
|
|
Hi @ThomasBurleson, thanks for the codepen starter. With angular.js 1.4.1: http://codepen.io/anon/pen/aOqpwQ With angular.js 1.3.15: http://codepen.io/anon/pen/XbZpeP |
|
seems to be broken still in 1.4.2 for me, even with the build you mentioned |
|
@rschmukler - can you confirm this is (a) an issue with Menu, and (b) related to $$rAF. Thx... more importantly, it would be nice to confirm this is not a Angular Material issue but an AngularJS issue. |
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 4, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 4, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 6, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
- disable scroll before creating the backdrop
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
update use of $$rAF and $timeout in Jasmine tests
use $animateCss to animate the dropdown leave.
Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 6, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
* $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
* use animateCss.js polyfill for 'material.animate' module
* add mock `createMockStyleSheet` for animateCss tests
* refactors to menu-interim-element.js and select.js
* refactor logic and patterns used
* use $animateCss in place of waitTransitionEnd()
* debounce Select and Menu window resize handlers
* Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
* disable scroll before creating the backdrop
* select async demo no longer clears users list when reloading
* select demos use `md-input-container { margin-right: 10px;}`
* hide Select Backdrop with zero duration
* enable full click detection in select-value area by using background color (with zero alpa).
* update use of $$rAF and $timeout in Jasmine tests
* use $animateCss to animate the dropdown leave.
* Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
kennethcachia
pushed a commit
to kennethcachia/material
that referenced
this issue
Sep 23, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
* $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
* use animateCss.js polyfill for 'material.animate' module
* add mock `createMockStyleSheet` for animateCss tests
* refactors to menu-interim-element.js and select.js
* refactor logic and patterns used
* use $animateCss in place of waitTransitionEnd()
* debounce Select and Menu window resize handlers
* Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
* disable scroll before creating the backdrop
* select async demo no longer clears users list when reloading
* select demos use `md-input-container { margin-right: 10px;}`
* hide Select Backdrop with zero duration
* enable full click detection in select-value area by using background color (with zero alpa).
* update use of $$rAF and $timeout in Jasmine tests
* use $animateCss to animate the dropdown leave.
* Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes angular#3919. Fixes angular#3837. Fixes angular#3773, Fixes angular#3640. Fixes angular#3527. Fixes angular#3653. Closes angular#3949.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Since angular 1.4 and 1.3.16 md-menu grow animation does not work. I've checked the change log and found that commit:
angular/angular.js@0adc036
Hope that someone can look at it.
The text was updated successfully, but these errors were encountered: