Having difficulties implementing ng-animate to fade out elements with ng-hide

Question

Having difficulties implementing ng-animate to fade out elements with ng-hide

There seems to be some confusion around CSS3 animations and learning Angular animations has been quite frustrating for me. To demonstrate, I have created a Plunker here: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview

Here is the CSS code used in the test scenario:

#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 am facing an issue where I want a form to slide up upon successful submission, with a success message sliding up underneath it. However, the under div just appears instead of animating. It behaves differently on Plunker compared to my code, where it initially shows, then vanishes with animation, only to reappear when the form is submitted. I have tried various solutions found online, such as using ng-animate="'name'" to create custom classes, but it does not work for me. The documentation also mentions an ng-hide-remove class that never seems to get applied.

Is there a benefit to using CSS3 transitions over creating custom animations with the animate module and utilizing jQuery? I believe keyframes might offer the most advantage. This challenge is making simple tasks, easily achievable in jQuery, exceedingly difficult...

angularjs css css-animations ng-animate

Answer 1

Answer №1

When it comes to using ng-animate="'name'", keep in mind that this is primarily for Angular versions pre-1.2.

For animations of this kind, consider two states for every element involved.

Visible
Hidden

Imagine you have a wrapper containing a form and a message div for the animation. Start by setting up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be inside the container and visible.

Here's an example based on your scenario (adjusted slightly 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;
}

In the visible state, both the form and the div are aligned to the top of the wrapper and fill the entire space, causing them to overlap. This won't be an issue as they shouldn't be visible simultaneously.

Next, define their hidden states:

For instance, when hidden, the form should be positioned above the wrapper:

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

Similarly, when hidden, the div should be positioned below the wrapper:

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

These adjustments should suffice, but some fine-tuning may be necessary depending on the version of AngularJS in use.

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

Answer 2

When it comes to using ng-animate="'name'", keep in mind that this is primarily for Angular versions pre-1.2.

For animations of this kind, consider two states for every element involved.

Visible
Hidden

Imagine you have a wrapper containing a form and a message div for the animation. Start by setting up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be inside the container and visible.

Here's an example based on your scenario (adjusted slightly 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;
}

In the visible state, both the form and the div are aligned to the top of the wrapper and fill the entire space, causing them to overlap. This won't be an issue as they shouldn't be visible simultaneously.

Next, define their hidden states:

For instance, when hidden, the form should be positioned above the wrapper:

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

Similarly, when hidden, the div should be positioned below the wrapper:

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

These adjustments should suffice, but some fine-tuning may be necessary depending on the version of AngularJS in use.

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

Having difficulties implementing ng-animate to fade out elements with ng-hide

Answer №1

Similar questions

Is there an issue with CSS rendering? Safari displays page headers and colors properly, but Firefox and Chrome are not showing the

What is the best way to enhance the appearance of the unordered list within the pagination design?

Preserve the checkbox-selected data in AngularJS for future reference

Having issues with the tailwindcss transformation not functioning properly, but the problem seems to resolve when directly incorporating it into the

Having trouble replacing/using a relative image URL with JavaScript. Absolute path is functional, but relative path is not working

What is the best way to define Bootstrap 5's CSS variables with the :root selector?

What is the role of z-index in relation to floating elements?

What methods are available for setting data to a field using CKEditor in a Protractor test?

Can the Foundation 5 class label.inline be exclusively utilized for @media medium-up conditions?

ng-class not updating using a combination of object and string

Developing an AngularJS application using Maven within the Eclipse environment

Arranging divs in a layout similar to tables cells and rows

I constructed a table using a loop, and now I am interested in setting up a click event for each individual cell

Transform a jQuery tree plugin into an AngularJS directive

Guidelines for Document State

Ways to define a variable based on a CSS class attribute?

Enhancing Angular $http requests by including a content-type header

Will opting for only Jquery over AngularJS enhance the IE compatibility of an application?

How to keep an image anchored at the bottom of the page without overlapping other content

Guide to aligning text vertically in a column alongside an image using Bootstrap 5