CSS3转换/转换

CSS3 transitioning/transforming

本文关键字：转换 CSS3      更新时间：2023-09-26

我正试图仅使用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 (  );
} );

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

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

    UPDATE: Ok, height工作，但只有固定值，max-height对于未知或可变高度有一点灵活。把它设为可能的最大值。但请记住，如果你有一个真正的元素height: 20px，并且在样式max-height: 200px和transition-duration: 1000ms中指定，你的元素在100毫秒内达到它们的高度(20px/200px * 1000ms)。

    相关文章：