Read more

Angular: Quick and easy animation on changed binding value

Dominik Schöler
September 18, 2015Software engineer at makandra GmbH

With ngAnimate, you can easily animate certain events (see directive support Show archive.org snapshot ). We'll make use of ngClass animations to style an element on changed binding value.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Say we have a slider and a separate details container. Each time the slider changes, we want to "flash" the details container by hiding it and fading it back in.

HTML

Add a custom class to the element you want to animate, i.e. the details container:

<div class="details slide-index-{{ currentSlideIndex }}">
  {{ content }}
</div>

ngClass will be taking care of updating the details container's slide-index-N class; e.g. when the currentSlideIndex changes from 4 to 5, the slide-index-4 class is being removed and the slide-index-5 class is being added.

CSS

With ngAnimate included, ngClass will add certain animation classes Show archive.org snapshot . In the above example, it will add slide-index-4-remove and slide-index-5-add in addition to the classes themselves. We can reference these classes in CSS:

.details {
  transition: opacity 1s;
  opacity: 1;
}

.details[class*="-remove"] {
  transition: none; // No transition on class removal -> instant hiding
  opacity: 0;
}

When the details container has the class slide-index-4-remove, the opacity is set to 0 without transition. The class is removed afterwards, having the container fade back in as defined for .details.

Posted by Dominik Schöler to makandra dev (2015-09-18 10:40)