css move elements smoothly

Question

Trying to make userface more userfriendly i want to implement following:

I have a table with some alert above it. Take a look at this example

When I close alert table 'jumps' to the top. I want it to slide smoothly. I want to use pure css. I've read about transition and animation but i think that's not what i need, or maybe i am wrong.

Any ideas? Thanks in advance!

http://stackoverflow.com/questions/31642748/bootstrap-content-smooth-slideup-when-closing-alert — Roope, Aug 04 '15 at 17:22
Roope, thank you but i was looking for pure css solution, something like transition works, you know — user3673623, Aug 04 '15 at 17:31
Animations ARE what you need. Just animate alert height to zero (slide up) or scale it for a zoom out effect. — Adriano Repetti, Aug 04 '15 at 17:36

AndrewHipp · Answer 1 · 2015-08-04T18:43:21.450

-2

K, so you can do it with pure css. Bootstrap removes the in class from the alert at the beginning of the fade out. We can use that to apply css to the alert before it's removed from the page.

.fade {
    max-height: 400px;
    -webkit-transition: .3s;
        -ms-transition: .3s;
            transition: .3s;
}

.fade:not(.in) {
    max-height: 0;
}

See it in action: http://jsfiddle.net/McHUc/92/

edited Aug 04 '15 at 18:43

answered Aug 04 '15 at 18:11

AndrewHipp

379
2
6

Added vendor prefixes which are needed for broader browser support. So it wouldn't work on most browsers. Updated sample code and fiddle. – AndrewHipp Aug 04 '15 at 18:43

css move elements smoothly

1 Answers1