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

Question

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.)

kinetifex · Accepted Answer · 2014-05-24 16:58:24Z

3

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.

answered May 24, 2014 at 16:58

kinetifex

964 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related