Code Monkey home page Code Monkey logo

Comments (9)

shans avatar shans commented on August 11, 2024

This seems like a bug to me. @alancutter, want to take a look?

from web-animations-js-legacy.

alancutter avatar alancutter commented on August 11, 2024

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.

joeytwiddle avatar joeytwiddle commented on August 11, 2024

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.

alancutter avatar alancutter commented on August 11, 2024

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.

alancutter avatar alancutter commented on August 11, 2024

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.

joeytwiddle avatar joeytwiddle commented on August 11, 2024

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.

joeytwiddle avatar joeytwiddle commented on August 11, 2024

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.

alancutter avatar alancutter commented on August 11, 2024

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.

joeytwiddle avatar joeytwiddle commented on August 11, 2024

Thank you for the clarification!

from web-animations-js-legacy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.