W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: transitions vs. animations

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 15 Apr 2010 22:38:50 -0700
Message-ID: <812F37BB868B4EC986BC5BD76F4AE6EE@terra3>
To: "Simon Fraser" <smfr@me.com>
Cc: HåkonWium Lie <howcome@opera.com>, <www-style@w3.org>



From: Simon Fraser 
Sent: Thursday, April 15, 2010 9:32 PM
To: Andrew Fedoniouk 
Cc: HåkonWium Lie ; www-style@w3.org 
Subject: Re: transitions vs. animations


On Apr 15, 2010, at 8:34 PM, Andrew Fedoniouk wrote:
  Please see my comments below:


  From: Simon Fraser 


    Consider:


    .foo {
      animate-in: "bounce" top 1s once;
    }


    .bar {
      animate-in: "bounce" top 1s once;
    }


    When the class changes from "foo" to "bar", does the animation of "top" run?

  If you will remove .foo and apply .bar then you will have
  "style changed" condition and so new-animation-in is used -
  it will play bounce once.


  But this isn't how CSS works (or certainly not how browsers implement style resolution). Once the cascading steps have been applied, information about where the style came from is lost. We just see that the old style has "animate-in: "bounce" top 1s once;" and the new style has the same rule. The browser will think there is no change, and not run the animation.

Hmm, I thought all this trivial. I do not know about internals of other CSS engines so 
speaking about my own... 

There are cases when you need to know previous used-style and new used-style. E.g. when 'position' or 'display' property change
you will need to do something at the moment.  I suspect that any UA has some kind of such triggers. 

If no such triggers used then consider this class (pseudo-code):

class  DOMElement 
{
   Style           currentStyle;
   Animation  currentAnimationIn;
   Animation  currentAnimationOut;
   ...

   function  findUsedStyle()
   {
       currentStyle = ... ; // do cascading magic, etc.
       if (currentAnimationIn != currentStyle.animationIn || 
           currentAnimationOut != currentStyle.animationOut)
       {
           startStopAnimation(); 
           currentAnimationIn = currentStyle.animationIn;
           currentAnimationOut = currentStyle.animationOut;
       }
   }
}

Logic and implementation is pretty trivial I would say, no?

-- 
Andrew Fedoniouk

http://terrainformatica.com
Received on Friday, 16 April 2010 05:39:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT