search

canjs / can-animate

animation view helpers
MIT License
4 stars 1 forks source link

Custom css animations/transitions support #1

Open wclr opened 9 years ago

wclr commented 9 years ago

Have you thought about this?

justinbmeyer commented 9 years ago

What do you mean? It supports custom animation values.

wclr commented 9 years ago

If I want to configure animation via css?

wclr commented 9 years ago

So the flow in this case would be:

Insertion: 1) When element is just inserted in DOM it gets some class animate-in (css animation is performed) 2) Waites animation/transition end, removes this class

Removal: 1) When element is going to be removed from DOM it gets some class animate-out (css animation is performed) 2) Waites animation/transition end, removes element from DOM.

justinbmeyer commented 9 years ago

@whitecolor Have you read the docs on this? For example: https://github.com/bitovi/can-animate/blob/master/doc/when.md or https://github.com/bitovi/can-animate/blob/master/doc/style.md#use

You can achive pretty close to what you are asking. I'm not sure if we can do it via className (not all browsers support CSS animations). However something like:

<div can-animate-when="inserted" can-animate-style="opacity: 1" style="opacity: 0">
justinbmeyer commented 9 years ago

cc @jandjorgensen

wclr commented 9 years ago

I'm not sure if we can do it via className (not all browsers support CSS animations)

why care too badly about old browsers, anyway all mordern browsers and even all mobile do support css animations (in some way) it would be responsobility of applicaiton dev

wclr commented 9 years ago

@justinbmeyer this actually pretty easy to implement, it would be also good to have before remove hooks API (so one could define what will happen when element is going to be removed).

justinbmeyer commented 9 years ago

I think jan got remove working

Sent from my iPhone

On Feb 26, 2015, at 2:09 PM, Alex notifications@github.com wrote:

@justinbmeyer this actually pretty easy to implement, it would be also good to have before remove hooks API.

— Reply to this email directly or view it on GitHub.