CODEWITHSUNDEEP
angularjscssng-animate
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

ng-Animate: How to also animate sibling div?

I just got into CSS animations with ngAnimate. Cool stuff! I'm now struggling to figure out how to control the animation of a sibling element affected by some animation.

Plunker: https://plnkr.co/edit/XqpMPklO2SDlZQ1GIJ5Z?p=preview

For example, in the above plunker, the top div animates away nicely, but the bottom div doesn't. Is there a way to also animate the bottom div when the top is animated?

div.top {
  width: 100%;
  background-color: red;
  height: 200px;
  position: relative;
  transition: 1s linear all;
  opacity: 1;
  top: 0;
}

div.bottom {
  widows: 100%;
  background-color: blue;
  height: 300px;
}

button {
  width: 100%;
  padding: 25px;
}

div.top.ng-hide {
  opacity: 0;
  top: -1000px;
}

Upvotes: 0

Views: 76

Answers (1)

ichigolas
ichigolas

Reputation: 7725

The problem has to do with the top div dissapearing suddenly. Make it transition to height: 0 and the bottom div will follow it's motion.

div.top.ng-hide {
  /* ... */
  height: 0;
}

Plnkr Fork

Upvotes: 2

Related Questions