CODEWITHSUNDEEP
angularjsng-animateanimate.css
Kevin Renskers
Kevin Renskers

Reputation: 5892

Properly animate hiding/showing element with Angular and animate.css

I have a basic plunker which shows the problem: http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview. When you click on the button the first element is shown/hidden with a bouncy animation. This works fine, but the problem is that the items below it just jump to the new place which is quite ugly and jarring.

So, if you click on the button, item One slides away and then a second later items Two and Three jump up. I'd like everything to slide up while item One slides away. How can this be done? Do I need to drop animate.css and write my own custom animations? How would that work? (I don't really care about the bouncy animation, it should just slide away / back into view.)

Upvotes: 1

Views: 618

Answers (1)

kinetifex
kinetifex

Reputation: 96

The current bouncy animation that you have is using a transform property which isn't going to effect sibling elements. If you did something like animate the margin, other elements would move as well.

You could either change the animation method on your target element, or leave it and additionally animate the target's adjacent sibling. I modified your Plunker demonstrating the latter:

http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview

*This also demonstrations using transitions on the hide and keyframes on the show.

To select the adjacent sibling next to the one being effected by ng-hide, make a css selector with the + symbol:

.item.ng-hide-add + .item {...}

Then by transitioning/animating margin-top, the remaining item elements will get pushed around too.

Upvotes: 3

Related Questions