search

arthur5005 / jquery.motionnotion

A jQuery plugin which allows for CSS3 animations to occur and complete on core jQuery manipulation and visibility functions such as append, remove, show and hide.
MIT License
6 stars 1 forks source link

maybe add in transition events? #4

Closed stevenvachon closed 10 years ago

stevenvachon commented 10 years ago

That way everything is in one library, instead of across many.

Here's an afterTransitions that I quickly hacked together: https://github.com/ai/transition-events/issues/6#issuecomment-29964462. It basically just grabs a total duration of all transitions for any given element and runs a timeout with an event. It works really well in MVC situations where you're not using jQuery.remove().

stevenvachon commented 10 years ago

I've created a plugin with this functionality. No longer a hacked mod like my link above :)

https://github.com/stevenvachon/jquery.transitionsend

arthur5005 commented 10 years ago

That's a clever piece of code, although doesn't it still depend on you knowing when the transition begins? someEl.addClass('classWithTransitions').afterTransitions()

My plugin's primary goal is to widen the separation of concerns between designer and coder, the less the coder knows about the animations the better.

stevenvachon commented 10 years ago

addClass() could be extended with transition checks. This slows down all other uses of the function, however.

arthur5005 commented 10 years ago

Consider the following:

div
{
    transition: width 2s;
}
div.someTransitionClass
{
   width:300px;
}

Detection would involve parsing out which transition properties are currently applied, which ones get applied after, and which properties have changed from before. Animations by comparison can be detected with an arbitrary name at the end of the animation-name property. Not something I'm willing to undertake at this time.