Comments (9)
This seems like a bug to me. @alancutter, want to take a look?
from web-animations-js-legacy.
I just tried this and it works as expected for me (animation applying on top of existing inline style).
<!DOCTYPE html>
<script src="web-animations.js"></script>
<div id="target">target</div>
<script>
target.style.width = '100px';
target.style.transform = 'rotate(45deg)';
target.animate(new KeyframeEffect([
{transform: 'translateX(0px)'},
{transform: 'translateX(100px)'},
], 'add'), 1000);
</script>
@joeytwiddle can you provide a full code example of the problem?
from web-animations-js-legacy.
Ah, my apologies, my problem is not with rotate(45deg)
. It occurs when I use:
target.style.transform = 'matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)';
That is enough to reproduce the issue under Firefox 30.0 and 31.0.
I am not sure if matrices are supposed to work differently by the spec, or if they are just not fully supported in the polyfill. Hopefully it's the latter, then I can wait for native or -next, or try to fix it.
Aside: Your example works for me in Firefox. But in Chromium 34 I see no rotation until I swap .transform
for ['-webkit-transform']
and then I see the bug! Hopefully that will disappear when I upgrade...
from web-animations-js-legacy.
I've updated the test case to use a matrix, it still behaves as expected in Firefox 31.
Can you provide a concrete code example of the problem?
<!DOCTYPE html>
<script src="web-animations.js"></script>
<div id="target">target</div>
<script>
target.style.width = '100px';
target.style.transform = 'matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)';
target.animate(new KeyframeEffect([
{transform: 'translateX(0px)'},
{transform: 'translateX(100px)'},
], 'add'), 1000);
</script>
from web-animations-js-legacy.
I just re-read the original post. I think the issue is in your expectations of transform composition.
The animation is correctly applying the translation after the rotation, the rotation has affected the co-ordinate system other transforms operate in and causes a translation in X to appear diagonal rather than horizontal.
You can confirm this behaviour by removing the animation and setting the inline style directly:
target.style.transform = 'rotate(45deg) translateX(100px)';}
from web-animations-js-legacy.
Thanks, my test case matches the test case you just posted.
There was indeed some confusion with my understanding of how composition works with/without matrices. I was sometimes seeing different behaviour between rotate
and matrix
transforms, but in Chrome 36 the behaviour is consistent. Another difficulty arises when we talk about this: adding an animation after all the others results in that transformation being applied before all the others!
But going back to the original question, is there any way to achieve what I want? Namely, to perform the translation independently from the matrix on the element's style. (Queue the animation "before" the element.style, so that its transformation is applied last.) I notice the spec talks about prioritization of animations, but I don't see any way for the user to control it.
I can adopt one of the workarounds if there is no neater solution.
from web-animations-js-legacy.
There is a simpler workaround, which is to create a container for the rotated div, and set the translation on the container. (I was just hoping to do it without a wrapper div.)
from web-animations-js-legacy.
There's no control over ordering animations with respect to inline style; animations always apply after inline style.
For ordering of animations amongst themselves one straightforward way to control it is by ordering the children in an AnimationGroup in the order you want them to apply their effects.
from web-animations-js-legacy.
Thank you for the clarification!
from web-animations-js-legacy.
Related Issues (20)
- Reversing on currentTime 0 performs a full reverse animation. HOT 2
- EffectCallback signature doesn't match spec HOT 1
- Browser support? HOT 1
- Composing two rotations with different transform-origin HOT 7
- IE (tested 9-11) break on transforms with -% HOT 2
- On Mac, Chrome will use '-webkit-transform' over 'transform' if both are present. HOT 2
- How to destroy an animation at the end of its life? HOT 4
- _pauseAnimationsForTesting incorrectly changes player currentTime
- More example please HOT 8
- CSS Filters WebAnimation Support HOT 3
- Help with proposal HOT 1
- Polyfill disagrees with native Element.animate impl HOT 3
- Negative cubic-bezier values are broken on sequences and groups
- Keyframe animation 'offset' clashes with SVG 'offset'
- bug(AnimationSequence): seems to fail when using AnimationGroup into it HOT 1
- Several scripts are missing license header HOT 1
- Error: "attempt to decompose non-normalized matrix" HOT 1
- Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode HOT 2
- Publish to npm
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-animations-js-legacy.