CODEWITHSUNDEEP
angularjscsscss-animationsng-animate
Rohit
Rohit

Reputation: 3146

Trouble getting ng-animate working on removing ng-hide

I suspect this is a case of not really understanding CSS3 animations, but in general, I've found Angular animation very frustrating to learn.

So to start, I have a plunker for this: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview

As I'm required to show code to get a plunker link going, here's the CSS in the test situation:

#wrapper {
    position: relative;
    overflow: hidden;
}

#wrapper, form, #wrapper > div {
    height: 400px;
    width: 400px;
}

#wrapper > * {
  transition: 10s linear all;
}

form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

form.ng-hide-add-active {
    top: -100%;
}

#wrapper > div {
    position: absolute;
    left: 0;
    top: 0;
    background: #66F;
}

#wrapper.ng-hide.ng-hide-remove-active {
        top: 100%;
}

I have a situation where I want to make a form, and if it successfully submits, I want the form to slide up with the success message sliding up under it. The problem is that while I can get the form to slide away, the under div just appears. In fact, it works better on plunker than on my code, where it starts up shown, goes away via animation, then just reappears when the form is submitted. No idea why that's the case, but in general, Angular animations are frustrating me. I tried looking up examples, and many mention using ng-animate="'name'" to create custom classes, but that doesn't seem to work for me. Likewise, the documentation mentions an ng-hide-remove class, but I never see that getting applied.

Is there any advantage to using CSS3 transitions over creating custom animations with the animate module, and just using jQuery to do it? I understand keyframes may be the biggest advantage? This is just making it really hard to do stuff that seems relatively easy in jQuery working...

Upvotes: 0

Views: 254

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

The examples using ng-animate="'name'" is for versions earlier than Angular 1.2.

For these kind of animations, vision two states for each involved element.

  1. Visible
  2. Hidden

You have a wrapper. Inside the wrapper you have two elements involved in the animation - a form and a div with a message. Now set up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be visible inside the container.

Here is an example based on yours (changed it some for clarity):

#wrapper {
  position: absolute;

  height: 200px;
  width: 200px;

  top: 100px;
  left: 100px;

  border: 1px solid silver;
}

#form {
  position: absolute;

  top: 0;

  height: 100%;
  width: 100%;

  background-color: #DDFEFF;

  transition: all 1s ease-in-out;
}

#submitted {

  position: absolute;

  top: 0;

  height: 100%;
  width: 100%;

  background-color: gold;

  transition: all 1s ease-in-out;
}

Both the form and the div are as large as the wrapper and aligned to the wrappers top, which means in this state they will overlap. This is not a problem however, since they shouldn't be visible at the same time.

Now define their hidden states.

For example, the form should when hidden be located above the wrapper:

#form.ng-hide {
  top: -100%;
}

And the div should when hidden be located below the wrapper:

#submitted.ng-hide {
  top: 100%;
}

That should be enough but minor tweaks might be needed depending on what AngularJS version you are using.

Demo: http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview

Upvotes: 1

Related Questions