Angular JS and Animate.css: fade animation is janky

Question

I have a dialog in which I'd like to display one of two things depending on the state of a variable. So, I hooked up 2 versions of a form with ng-if.

When you click "delete" button on first state, it toggles to the second state.

I wanted to make it less abrupt, so I tried adding some css:

[ng-if].ng-enter {
  animation: fadeIn .5s;
}
[ng-if].ng-leave {
  animation: fadeOut .5s;
}

These animations come from the bower package "animate css":

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

.fadeIn {
  animation-name: fadeIn;
}

However, as you can see in my animated GIF below, what happens is that for a second BOTH forms appear, making the dialog taller, then one fades out.

animated gif sample

Is there no way to do a simple fadein/fadeout as in jQuery? I used to do this all the time with it, but trying to get nice UI animation in Angular is eluding me.

You're probably looking for callbacks, so you can fade one out, then fade the other in -> stackoverflow.com/questions/20828681/… — adeneo
– adeneo, Commented May 24, 2015 at 15:22

Kapunahele Wong · Accepted Answer · 2015-05-24 15:32:03Z

0

I had a similar problem with an Angular app and animations. I ended up having to use jquery - I wish I had a better answer - but it turned out beautifully. One note, though, I had to wrap any jquery I used in a noConflict() and use body on click plus the element because it doesn't exist yet in the DOM:

$.noConflict();jQuery( document ).ready(function( $ ) {
      $('body').on('click', "#toggler", function(){
        $('#div_to_show').slideDown();
  });
});

I realize this a tangential answer and not an elegant solution but it worked for me to get it out the door under a tight deadline.

answered May 24, 2015 at 15:32

Kapunahele Wong

638 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luca Colonnello · Accepted Answer · 2015-05-24 15:58:06Z

0

A clean solution is to change the state you use to check which form is to display when the animation ng-leave ends.

You can use a second variable to set the ng-leave class in the form that will be hidden.

I can't post you some code because i don't know your js and html.

answered May 24, 2015 at 15:58

Luca Colonnello

1,45612 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular JS and Animate.css: fade animation is janky

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related