由内部元素显示或隐藏引起的div高度变化的过渡

时间：2021-12-25 20:25:35

Suppose I have a wrapper div which has 2 inner div's , the 2nd inner div has a toggle of show/hide , since it's an inner element , its appearance/disappearance cause to height change on the wrapper .

假设我有一个有2个内部div的包装div,第2个内部div有一个show / hide的切换,因为它是一个内部元素,它的出现/消失导致包装器的高度变化。

<div class="wrapper">
    <div class="red">
    </div>
    <div class="blue">
    </div>
</div>

I want to animate this change by transition: height property .

我想通过transition:height属性来设置此更改的动画。

In this jsFiddle I tried to animate the wrapper height change with no success .

在这个jsFiddle中,我尝试动画包装器高度变化没有成功。

How to get that ?

怎么弄?

Note :

1) I don't know the actually height after each show/hide .

1)我不知道每次表演/隐藏后的实际高度。

2) I looking for a pure css solution .

2)我在寻找纯粹的css解决方案。

1 个解决方案

#1

1  

If i understand you perfectly, You should use transition: height on .blue

如果我完全理解你,你应该使用过渡:高度.blue

.blue {
        background-color : blue ; 
        width : 500px ; 
        height : 0px ; 
        -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
        transition: height 2s;
    }
    .blue.show {
        height:300px;
    }

DEMO

#1

1  

If i understand you perfectly, You should use transition: height on .blue

如果我完全理解你,你应该使用过渡:高度.blue

.blue {
        background-color : blue ; 
        width : 500px ; 
        height : 0px ; 
        -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
        transition: height 2s;
    }
    .blue.show {
        height:300px;
    }

DEMO

标签：

相关文章