javascript - CSS3 过渡/转换

Question

我正在尝试仅使用 css 为某些元素设置动画，正如您在下面的代码中看到的那样，就动画而言，一切正常，问题出在由动画元素创建的空间中。理想情况下，当元素不在 View 中时，不应有空白。在我下面的尝试中 if ( x === true )工作正常，为元素创建了额外的空间，然后元素在创建的新空间中移动，但是当 if 语句的第二部分 else执行过程反转，元素的空间消失，然后元素被动画移出 View ，同时与它下面的元素重叠。

我希望我没有在上面搞砸太多...... :(

简而言之:

1. <div class="animateX_def">不应该在页面上占用任何空间

2。 <a id="animateMe">单击，为 <div class="animateX_def"> 创建空间

3。 <div class="animateX_def">将自身动画化到为它创建的新空间中。

1. 当 <a id="animateMe">再次点击，<div class="animateX_def">将自身动画化出 View 。

2. 空间<div class="animateX_def">正在带走。

我该怎么做？我的代码有什么问题？

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

使用最大高度。这不是理想的解决方案，因为“打开”状态需要静态值。

示例:http://jsfiddle.net/daaym4ck/对于 only css 解决方案，我添加了 input[type="checkbox"] 用于打开/关闭状态控制。

更新:好的，height 工作，但只有固定值，max-height 对于未知或可变高度有点灵活.只需将其设置为可能的最大值。但请记住，如果您有真实元素 height: 20px，并在样式中指定 max-height: 200px 和 transition-duration: 1000ms ，您的元素在 100 毫秒 (20px/200px * 1000ms) 内达到其高度。