in/out animation on same element about angular-fx HOT 6 CLOSED

@nikeshbhagat Hi, good question, actually it is possible BUT it strictly depends on the use case, check:

<button
 class="btn btn-large bg-error color-white" 
 ngfx-default="show" 
 ngfx-speed="slow" 
 ngfx-bounce-in="x <= 5" 
 ngfx-fade-out="!x">
       First fadeout then bouncein
 </button>

if you add this button inside the page here https://github.com/720kb/angular-fx/blob/master/index.html , then run the same page in the browser, you'll see the element first fade-out then bounce-in.

It uses ngfx-default="show" so it first shows the element by default > fadeout -> bounce in

In other cases it could be useful ngfx-default="hide" instead ... so i would suggest you to try something and to report what and if something is not working (better if you attach a plunkr or jsfiddle with it).

Let know and thank you for the question.

from angular-fx.

Thanks for your explanation and speedy reply. I'll experiment a bit and let you know.

Of course, thanks for ngfx, in general - very handy.

from angular-fx.

@nikeshbhagat you're welcome!

from angular-fx.

I'm having trouble with this as well. I have attached plunk.zip to give you an example of what it is I'm trying to do. In the end, I'm trying to get the first element to fade in, then when i click the button, fade out and trigger the next element to fade in. Any help you can provide would be greatly appreciated. Thanks!

from angular-fx.

Nevermind, answered my own question! The key here is to have two different variables controlling the animations. Once I split ngfx-fade-in-up to be controlled by one variable and ngfx-fade-in-out to be controlled by a different variable, everything worked great. Thanks for this awesome module! 👍

from angular-fx.

@ethanmay you're welcome, actually this could be improved anyway, since there still troubles using more than 1 or 2 animations on the same element, one more trick is to use a new element like a <span> to wrap every animation, but well... if you solved i am glad.

from angular-fx.