Question

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

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

简而言之：

1。<div class="animateX_def">不应占用页面上的任何空格

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

创建空间

3. <div class="animateX_def">将自己设置为为其创建的新空间。

再次点击<a id="animateMe">时，<div class="animateX_def">会将自己动画显示在视图之外。
<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

使用max-height。它不是理想的解决方案，因为需要静态值才能打开＆＃34;打开＆＃34;状态。

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

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

CSS3过渡/转换

1 个答案: