fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

ThomasBurleson · 2015-07-29T22:27:44Z

Replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use $animateCss polyfill for Angular versions < 1.4.x

$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

.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 · 2015-07-29T22:29:40Z

@jelbourn @robertmesserle @matsko @rschmukler - For your review. This code works great at runtime with Angular 1.3.15 and Angular 1.4.3.

@matsko - Unfortunately the Karma tests fail when testing with Angular 1.3.15, so we are unable to merge until this is resolved.

matsko · 2015-07-29T22:32:30Z

Ok I will figure this out tonight
On Jul 29, 2015 6:30 PM, "Thomas Burleson" [email protected] wrote:

@jelbourn https://github.com/jelbourn @robertmesserle
https://github.com/robertmesserle @matsko https://github.com/matsko
@rschmukler https://github.com/rschmukler - For your review. This code
works great at runtime with Angular 1.3.15 and Angular 1.4.3.

@matsko https://github.com/matsko - Unfortunately the Karma tests fail
when testing with Angular 1.3.15, so we are unable to merge until this is
resolved.

—
Reply to this email directly or view it on GitHub
#3949 (comment).

ThomasBurleson · 2015-07-29T22:32:51Z

config/build.config.js

@@ -3,7 +3,7 @@ var fs = require('fs');
 var versionFile = __dirname + '/../dist/commit';

 module.exports = {
-  ngVersion: '1.4.3',
+  ngVersion: '1.3.15',


This will not be merged; it is, however, useful for testing the Karma failures with Angular 1.3.x

ThomasBurleson · 2015-07-29T22:39:31Z

@matsko - to be clear:

Use Angular 1.3.15 in our local Documentation SPA works as expected without any [apparent] issues
Using Angular 1.4.3 in our local Documentation SPA works as expected without any [apparent] issues
Running the Material Karma tests with Angular 1.4.3 passes all tests
Running the Material Karma tests with Angular 1.3.15 FAILS many of the tests.

ThomasBurleson · 2015-07-30T02:08:52Z

src/components/dialog/dialog.spec.js

+        $rootScope.$apply();
+        $$rAF.flush();
+      } finally {
+        $timeout.flush();


Need to check if this finally is still needed.

jelbourn · 2015-07-30T16:16:20Z

src/components/backdrop/backdrop.scss

@@ -5,6 +5,7 @@ md-backdrop {
  }
  &.md-select-backdrop {
    z-index: $z-index-dialog + 1;
+    transition-duration: 0ms;


jelbourn · 2015-07-30T16:37:39Z

src/components/menu/menu-interim-element.js

+              $animateCss(element, {
+                addClass : 'md-active',
+                from : animator.toCss( position ),
+                to : animator.toCss( { transform : 'scale(1.0,1.0)' })


Remove extra spaces from inside object literal (here and elsewhere). E.g.,
animator.toCss({transform: 'scale(1.0,1.0)'})

ThomasBurleson · 2015-07-30T20:03:46Z

@jelbourn - All (99%) your comments have been addressed.

ThomasBurleson · 2015-08-06T04:18:29Z

@matsko - great work with $animateCss

@include

… 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.

@include

… 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.

ThomasBurleson reviewed Jul 29, 2015
View reviewed changes

ThomasBurleson added needs: review This PR is waiting on review from the team hotlist: animations hotlist: angular-issue labels Jul 30, 2015

ThomasBurleson added this to the 0.11.0 milestone Jul 30, 2015

ThomasBurleson self-assigned this Jul 30, 2015

ThomasBurleson reviewed Jul 30, 2015
View reviewed changes

ThomasBurleson mentioned this pull request Jul 30, 2015

angular-material breaks our app by just being included as a dependency #3941

Closed

jelbourn reviewed Jul 30, 2015
View reviewed changes

ThomasBurleson mentioned this pull request Jul 30, 2015

md-menu Touch devices issue #3785

Closed

This was referenced Jul 31, 2015

High CPU usage #2701

Closed

Animations not working with 1.4.x releases, ok with 1.3 angular/angular.js#12267

Closed

Narretz mentioned this pull request Aug 3, 2015

Angular 1.4.x breaks Angular Material Select menu angular/angular.js#12375

Closed

robertmesserle force-pushed the master branch from cd6c408 to 535d3a0 Compare August 5, 2015 19:56

ThomasBurleson force-pushed the wip/use_animatecss branch from ba2626d to cd52e57 Compare August 6, 2015 01:25

ThomasBurleson added pr: merge ready This PR is ready for a caretaker to review and removed needs: review This PR is waiting on review from the team needs: work labels Aug 6, 2015

ThomasBurleson force-pushed the wip/use_animatecss branch from 9cbaffb to e93b6b8 Compare August 6, 2015 11:37

ThomasBurleson closed this in d2a76c2 Aug 6, 2015

ThomasBurleson removed the pr: merge ready This PR is ready for a caretaker to review label Aug 6, 2015

EladBezalel deleted the wip/use_animatecss branch January 16, 2016 00:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

Uh oh!

ThomasBurleson commented Jul 29, 2015

Uh oh!

ThomasBurleson commented Jul 29, 2015

Uh oh!

matsko commented Jul 29, 2015

Uh oh!

ThomasBurleson Jul 29, 2015

Uh oh!

ThomasBurleson commented Jul 29, 2015

Uh oh!

ThomasBurleson Jul 30, 2015

Uh oh!

jelbourn Jul 30, 2015

Uh oh!

jelbourn Jul 30, 2015

Uh oh!

ThomasBurleson commented Jul 30, 2015

Uh oh!

ThomasBurleson commented Aug 6, 2015

Uh oh!

Uh oh!

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

Uh oh!

Conversation

ThomasBurleson commented Jul 29, 2015

Uh oh!

ThomasBurleson commented Jul 29, 2015

Uh oh!

matsko commented Jul 29, 2015

Uh oh!

ThomasBurleson Jul 29, 2015

Choose a reason for hiding this comment

Uh oh!

ThomasBurleson commented Jul 29, 2015

Uh oh!

ThomasBurleson Jul 30, 2015

Choose a reason for hiding this comment

Uh oh!

jelbourn Jul 30, 2015

Choose a reason for hiding this comment

Uh oh!

jelbourn Jul 30, 2015

Choose a reason for hiding this comment

Uh oh!

ThomasBurleson commented Jul 30, 2015

Uh oh!

ThomasBurleson commented Aug 6, 2015

Uh oh!

Uh oh!