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

md-toast no longer animating with angular-animate 1.4.x #3640

Closed
ryanespin opened this issue Jul 8, 2015 · 0 comments
Closed

md-toast no longer animating with angular-animate 1.4.x #3640

ryanespin opened this issue Jul 8, 2015 · 0 comments
Assignees
@ThomasBurleson
Labels
hotlist: animations
Milestone
1.0-rc1

Comments

@ryanespin
Copy link

When using angular-animate 1.4.x, the animation of the toast moving is no longer happening.

Here's an example of it work with 1.3.15:
http://codepen.io/ryanespin/pen/mJxZNJ

Here's one of it not working with 1.4.2:
http://codepen.io/ryanespin/pen/domBaE
@ThomasBurleson ThomasBurleson added this to the 0.11.0 milestone Jul 8, 2015
@ThomasBurleson ThomasBurleson self-assigned this Jul 8, 2015
@tuchk4 tuchk4 mentioned this issue Jul 9, 2015
Closed
@ThomasBurleson ThomasBurleson mentioned this issue Jul 9, 2015
Closed
@ThomasBurleson ThomasBurleson modified the milestones: 0.11.0, 0.10.1 Jul 9, 2015
ThomasBurleson added a commit that referenced this issue Jul 29, 2015
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss instead of…
33a1666 
… 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 ThomasBurleson mentioned this issue Jul 29, 2015
Closed
ThomasBurleson added a commit that referenced this issue Jul 29, 2015
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss instead of…
29cf32b 
… 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
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss instead of…
b6d6a60 
… 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
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss
f8dc9f7 
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
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss
20f2f06 
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 ThomasBurleson mentioned this issue Jul 29, 2015
Closed
@ThomasBurleson ThomasBurleson modified the milestones: 0.10.1, 0.11.0 Jul 31, 2015
ThomasBurleson added a commit that referenced this issue Aug 4, 2015
@ThomasBurleson @matsko
fix(dialog, menu, select, interimElement): use $animateCss instead of…
765b000 
… 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
@ThomasBurleson @matsko
fix(dialog, menu, select, interimElement): use $animateCss
9b2eaa7 
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
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss instead of…
cd52e57 
… 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
@ThomasBurleson
fix(dialog, menu, select, interimElement): use $animateCss instead of…
e93b6b8 
… 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
@ThomasBurleson @kennethcachia
fix(dialog, menu, select, interimElement): use $animateCss instead of…
043e0ec 
… 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.
Assignees

@ThomasBurleson ThomasBurleson

Labels
hotlist: animations
Projects
None yet
Milestone
1.0-rc1
Development

No branches or pull requests
2 participants
@ThomasBurleson @ryanespin