CSS3 transitioning/transforming

Question

I am trying to animate certain elements using only css, as you can see in the code below, everything is working fine as far as animation goes, the problem is in the space created by the elements which being animated. Ideally there should be no white space when the elements are out of view. In my try below if ( x === true ) works fine the extra space is created for the element and then the element moves in the new space created, but when the second part of the if statement else is executed the process reverses, the space for the element goes away and then the element is animated out of the view while overlapping the elements below it.

I hope I haven't messed up too much above... :(

in short :

1.<div class="animateX_def"> should not take any space on the page

2.<a id="animateMe"> is clicked, space is created for <div class="animateX_def">

3.<div class="animateX_def"> animates itself into the new space created for it.

4. When <a id="animateMe"> is clicked again, the <div class="animateX_def">animates itself out of the view.

5. The space which <div class="animateX_def"> was taking goes away.

How do I do that ? What's wrong with my code ?

HTML

<a id="animateMe" href="#">Click me</a>

<div class="animateX_def" style="position: absolute;">

    <div class="child_element">
        ---
    </div>
    ---
    ---

</div>

CSS

.animateX_def {
    transition:All 600ms ease-in-out;
    -webkit-transition:All 600ms ease-in-out;
    -moz-transition:All 600ms ease-in-out;
    -o-transition:All 600ms ease-in-out;

    transform: scale(0) translate(-999px);
    -webkit-transform: scale(0) translate(-999px);
    -moz-transform: scale(0) translate(-999px);
    -o-transform: scale(0) translate(-999px);
    -ms-transform: scale(0) translate(-999px);
}

.animateX {
    transform: scale(1) translate(0px);
    -webkit-transform: scale(1) translate(0px);
    -moz-transform: scale(1) translate(0px);
    -o-transform: scale(1) translate(0px);
    -ms-transform: scale(1) translate(0px);
}

Javascript

var x = true;

$ ( '#animateMe' ).click ( function ( event ) { 

        if ( x === true )
        {
                $ ( '.animateX_def' ).css ( 'position', 'static' );
                $ ( '.animateX_def' ).toggleClass ( 'animateX' );
                x = false;
        }
        else
        {

                $ ( '.animateX_def' ).toggleClass ( 'animateX' );
                $ ( '.animateX_def' ).css ( 'position', 'absolute' );
                x = true;
        }

        event.preventDefault (  );
        event.stopPropagation (  );

} );

Answer 1

Use max-height. It's not ideal solution because required static value for "open" state.

Example: http://jsfiddle.net/daaym4ck/ And for only css solution I added input[type="checkbox"] for open/close state control.

UPDATE: Ok, height work to, but only with fixed values, max-height a little bit flexible for unknown or variable height. Just set it on possible maximum. But keep in mind, if you have real element height: 20px, and specified in styles max-height: 200px and transition-duration: 1000ms, your element reach their height in 100 ms (20px/200px * 1000ms).