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

ngAnimate breaks jquery.transit (and possibly other transform-based animations) under Chrome #6675

Closed
bpampuch opened this issue Mar 13, 2014 · 11 comments
Closed

ngAnimate breaks jquery.transit (and possibly other transform-based animations) under Chrome #6675

bpampuch opened this issue Mar 13, 2014 · 11 comments
Assignees
@matsko
Labels
component: ngAnimate frequency: low severity: broken expected use type: bug
Milestone
Backlog - won't fix

Comments

@bpampuch
Copy link

I'm trying to animate transforms using JavaScript-based animations.

(...)
enter: function(element, done) {
  element.transition( { scale: 1.5 }, done );
}
(...)

Although the above behaviour could be easily achieved using CSS, I need to use JS-animations (it's part of a bigger scenario).

Unfortunately this doesn't work under Chrome. The transform is immediately set to the final value.

The problem is, ngAnimate in its animateSetup disables the transition with blockTransitions (as a workaround for a bug in Chrome/FF as it claims).

Apparently this workaround leads to another bug under Chrome/FF.

http://plnkr.co/edit/z4sMCsDMvABPmvTnLzkp?p=preview
@thetrevdev thetrevdev mentioned this issue Mar 14, 2014
Closed
@WojtekWoo
Copy link

+1

@IgorMinar
Copy link
Contributor

@matsko is this a known issue?

@IgorMinar IgorMinar added this to the Backlog milestone Mar 18, 2014
@matsko
Copy link
Contributor

matsko commented Mar 18, 2014

I think it has to do with the ordering of the animations. I'm currently looking into it.

SekibOmazic added a commit to SekibOmazic/angular.js that referenced this issue Mar 19, 2014
@SekibOmazic
fix($filter): $orderBy filter with dates when sorting against multipl…
139a6fa 
…e fields

extend compare method to use Date.valueOf() when comparing dates

closes angular#6675
@SekibOmazic SekibOmazic mentioned this issue Mar 19, 2014
Closed
@SekibOmazic
Copy link
Contributor

Please ignore the reference to the pull request 6746. It was just a typo in the commit message. PR 6746 refers to the issue 6676.
Sorry for that.

@OlenDavis
Copy link
Contributor

+1

SekibOmazic added a commit to SekibOmazic/angular.js that referenced this issue Mar 20, 2014
@SekibOmazic
fix($filter): $orderBy filter with dates when sorting against multipl…
137a96d 
…e fields

extend compare method to use Date.valueOf() when comparing dates

closes angular#6675

remove custom isDate function - angular already has one
matsko added a commit to matsko/angular.js that referenced this issue Mar 21, 2014
@matsko
fix($animate): run CSS animations before JS animations to avoid style…
f92d3d9 
… inheritance

If a JS animation is run before a CSS animation then the JS animation may end up writing style
data to the element. If any transition or animation style data is written then it may end up
being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result
in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element.
If the CSS animation is run before the JS animation then, if there are no transitions on the style
attribute nor within the global CSS on the page then nothing will happen and the JS animation can
work as expected.

Closes angular#6675
matsko added a commit to matsko/angular.js that referenced this issue Mar 21, 2014
@matsko
fix($animate): run CSS animations before JS animations to avoid style…
121c298 
… inheritance

If a JS animation is run before a CSS animation then the JS animation may end up writing style
data to the element. If any transition or animation style data is written then it may end up
being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result
in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element.
If the CSS animation is run before the JS animation then, if there are no transitions on the style
attribute nor within the global CSS on the page then nothing will happen and the JS animation can
work as expected.

Closes angular#6675
@matsko matsko mentioned this issue Mar 21, 2014
Closed
@matsko
Copy link
Contributor

matsko commented Mar 21, 2014

@bpampuch the code is fixed good sir: http://plnkr.co/edit/Gy4RZeDnIYvWGWessQfV?p=preview

@matsko
Copy link
Contributor

matsko commented Mar 21, 2014

Waiting on #6799 to go in.

matsko added a commit to matsko/angular.js that referenced this issue Mar 26, 2014
@matsko
fix($animate): run CSS animations before JS animations to avoid style…
f143e9f 
… inheritance

If a JS animation is run before a CSS animation then the JS animation may end up writing style
data to the element. If any transition or animation style data is written then it may end up
being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result
in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element.
If the CSS animation is run before the JS animation then, if there are no transitions on the style
attribute nor within the global CSS on the page then nothing will happen and the JS animation can
work as expected.

Closes angular#6675
@matsko matsko closed this as completed in 2317af6 Mar 26, 2014
@matsko
Copy link
Contributor

matsko commented Mar 26, 2014

Landed as 2317af6

@matsko matsko reopened this Mar 26, 2014
@matsko matsko closed this as completed Mar 26, 2014
matsko added a commit that referenced this issue Mar 26, 2014
@matsko
fix($animate): run CSS animations before JS animations to avoid style…
0e5106e 
… inheritance

If a JS animation is run before a CSS animation then the JS animation may end up writing style
data to the element. If any transition or animation style data is written then it may end up
being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result
in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element.
If the CSS animation is run before the JS animation then, if there are no transitions on the style
attribute nor within the global CSS on the page then nothing will happen and the JS animation can
work as expected.

Closes #6675
@matsko
Copy link
Contributor

matsko commented Mar 26, 2014

And as 0e5106e for 1.2.x

@bpampuch
Copy link
Author

awesome ! :) thx

@oisinlavery
Copy link

+1

petebacondarwin pushed a commit that referenced this issue Jul 15, 2014
@SekibOmazic @petebacondarwin
fix(orderBy): correctly order by date values
92bceb5 
Closes #6675
Closes #6746
petebacondarwin pushed a commit that referenced this issue Jul 15, 2014
@SekibOmazic @petebacondarwin
fix(orderBy): correctly order by date values
f1b2884 
Closes #6675
Closes #6746
ckknight pushed a commit to ckknight/angular.js that referenced this issue Jul 16, 2014
@SekibOmazic
fix(orderBy): correctly order by date values
32cdaef 
Closes angular#6675
Closes angular#6746
@theurere theurere mentioned this issue Aug 26, 2014
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@matsko matsko

Labels
component: ngAnimate frequency: low severity: broken expected use type: bug
Projects
None yet
Milestone
Backlog - won't fix
Development

Successfully merging a pull request may close this issue.

fix($animate): run CSS animations before JS animations to avoid style inheritance matsko/angular.js
7 participants
@matsko @IgorMinar @oisinlavery @bpampuch @SekibOmazic @OlenDavis @WojtekWoo