Add animationEnd option for transition service

[ajoslin]

So people can use keyframes for their animations, which trigger the animationEnd event instead of transitionEnd event.

[pkozlowski-opensource]

@petebacondarwin would be awesome if you could review this one. I still didn't go over implementation details of the transition service....

[petebacondarwin]

So my main concern with this is that CSS3 has transitions, transforms and
animations. We should either have three separate services for these or one
for all three.
Having three services seems overkill since it does pretty much the same
thing in each case but if we have only one service then perhaps it should
not be called $transition but for the life of me I don't have a better name,
Further to this, I don't think that options.animation is a good API. It
should be something more generic like options.eventType, which would be one
of 'transition', 'animation', 'transform', defaulting to one of them.
Pete

On 9 January 2013 19:39, Pawel Kozlowski notifications@github.com wrote:

@petebacondarwin https://github.com/petebacondarwin would be awesome if
you could review this one. I still didn't go over implementation details of
the transition service....

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12062728.

[ajoslin]

Transforms don't have their own end event name, though. I think the only options are *transitionEnd and *animationEnd.

And I wasn't sure about the API to use for this, but since there is only one alternative having a flag seemed reasonable and easier to remember than {eventType: 'animation'}

[petebacondarwin]

OK, I ought to read the docs before I open my mouth.

Despite this, here I go again...

I wonder if actually we could do something more cool with animations. They
are not quite run in the same way as transitions.
To trigger a transition you change the property that is being transitioned
(i.e. height property in Collapsible).

To trigger an animation you apply an animation-name to an element and it
animates until you remove that animation-name or the animation ends.
Given this difference, I could imagine having a specialized $animate
service that takes the animation-name (and possibly the other properties
such as duration, iteration count, etc) to trigger that animation. The
service wouild apply the animation properties directly to the element. The
promise that is returned could remove the animation-name to stop the
animation, as well as reporting if/when the animation completed.

The definition of the animation would still be provided in CSS via the
keyframes declaration, we would just be using the animation-name provided
by this declaration rather than a CSS class name.

On 9 January 2013 21:28, Andy Joslin notifications@github.com wrote:

Transforms don't have their own end event name, though. I think the only
options are *transitionEnd and *animationEnd.

And I wasn't sure about the API to use for this, but since there is only
one alternative having a flag seemed reasonable and easier to remember than {eventType:
'animation'}

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12067598.

[ajoslin]

I think the CSS class is still a better approach, and people could use an object with styles if they really didn't want a css class.

You could have a pretty complicated css animation class, say for example for a sun rising and setting:

.sun {
  -webkit-animation-name: sunrise 5s, sunset 5s;
  -webkit-animation-timing-function: ease-in, ease-out;
  /* Sun stays at the top of the sky for 5sec standing still before sunset */
  -webkit-animation-delay: 0s 5s; 
  /* Make it so style for sunrise and sunset animations stay applied afterwards */
  -webkit-animation-fill-mode: "forwards", "forwards"; 
}

[petebacondarwin]

As I said, I hadn't really read the docs, again!!
Thanks for keeping us pointing in the right direction.

Is it really this simple? Can we come up with a more general name that is
not $transition?

On 10 January 2013 17:15, Andy Joslin notifications@github.com wrote:

I think the CSS class is still a better approach, and people could use an
object with styles if they really didn't want a css class.

For example you could have a pretty complicated css animation class:

.sun {
-webkit-animation-name: sunrise 5s, sunset 5s;
/* Sun stays at the top of the sky for 5sec standing still before sunset /
-webkit-animation-delay: 0s 5s;
/ Make it so style for sunrise and sunset animations stay applied afterwards */
-webkit-animation-fill-mode: "forwards", "forwards";

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12107670.

[ajoslin]

I think it is simple enough to switch the end event. But you're right, I dunno if $transition is the best name for it.

I dunno.. $change? $move? $flux? $shift? $transform?

[petebacondarwin]

Perhaps $animate and pretend that transitions are just a special form of
animation?

On 10 January 2013 19:40, Andy Joslin notifications@github.com wrote:

I think it is that simple. But you're right, I dunno if $transition is the
best.

I dunno.. $change? $move? $flux? $shift? $transform?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12114814.

[joshdmiller]

What about $effect?

[petebacondarwin]

Too vague for me. :-(

On 10 January 2013 20:09, Josh D Miller notifications@github.com wrote:

What about $effect?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12116107.

[ajoslin]

I like $transition fine. Should we just merge this and keep the name?

[petebacondarwin]

OK

On 24 January 2013 21:06, Andy Joslin notifications@github.com wrote:

I like $transition fine. Should we just merge this and keep the name?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/40#issuecomment-12673434.

[pkozlowski-opensource]

Landed as 11348f9