Reliable dynamic animation/transition events

Hello www-stylers,

Animatedly changing an element's style via the CSSOM seems like a
common use case on the web.  However, I'm currently unaware of a way
to animate/transition style properties dynamically with reliable start
and/or end events.

For example, Chrome's New Tab page uses CSS transitions to animatedly
a failed drag.  A fake example:

  element.ondragend = function() {
    this.style.transform = 'translate(' + origX + ',' + origY ')';
    this.ontransitionend = doFunStuff;  // Pretend this works.
  };

A transitionend event may never fire if the computed styles before and
after match (in our case, if the user drops on the exact starting
position).  We've added hacks to compare the before and after position
and call the handler right away, but this is error prone.  Consider
the proposed hacky code:

  function makeRedOnce() {
    if (element.style.color == 'red') {
      wereSoDone();  // Never fires.
    } else {
      element.style.color = 'red';
      element.ontransitionend = wereSoDone;  // Just pretend.
    }
  }

Setting and getting style properties aren't one-to-one.  In this case
getting `element.style.color` returns "rgb(255, 0, 0)" after *setting*
`element.style.color = 'red';`.  This is a simple case, but complex
transformation matrices (that could be off by the tiniest bit due to
floating point precision!) or comparing swaths of computed styles
sounds dreadful.

Relying on these events to reliably fire is basically impossible for
us.  Even without relying on user behavior, transitionend events can
act unexpectedly - http://jsfiddle.net/pBnx8/1/ (no transitionend when
same computed value), http://jsfiddle.net/pJdhu/8/ (transitions fail
when element is hidden at first) (use Firefox; same problems in
WebKit, though).

I've been told CSS animations solve these reliability issues, but the
only way I'd know how to make dynamic animations - open a stylesheet
and write a .dynamic-class -> @keyframe dynamic-name map to it -
disgusts the purist in me.

Do web authors currently have a way to apply dynamic
animations/transitions reliably or are there future plans for this?

Thanks for reading,

Dan Beam
dbeam@chromium.org

Received on Thursday, 13 December 2012 10:45:54 UTC