CSS3 transitioning/transforming

Question

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

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

简而言之：

1.<div class="animateX_def">不应该在页面上取任何space

2.<a id="animateMe">被点击，space被创建为<div class="animateX_def">

3.<div class="animateX_def"> 将自身动画化为为其创建的新 space。

当再次单击 <a id="animateMe"> 时，<div class="animateX_def"> 会自动离开视图。
<div class="animateX_def">带走的space消失了

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

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

使用max-height。这不是理想的解决方案，因为 "open" 状态需要静态值。

示例：http://jsfiddle.net/daaym4ck/ 而对于 仅 css 解决方案，我为 open/close 状态控制添加了 input[type="checkbox"]。

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

CSS3 transitioning/transforming

CSS3 transitioning/transforming

javascript

css

jquery

css-transitions