HTML/CSS/JS：Max-Height 被错误识别并且未应用于转换

Question

假设我有一个蓝色方块和一个压缩的红色方块：

所以我希望，当我单击正方形时，红框会根据当前内容重新调整其大小：

当我再次点击正方形时，我希望红框 return 恢复到原来的状态：

而且我希望两个动作都缓慢发生，transition 属性。

所以我有两个问题：首先，转换在任何步骤都不起作用。第二，一旦我把盒子放回原来的状态，我就不能再放大了。

代码如下：

HTML:

<div id="red_box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo, ipsum non ultrices pulvinar, turpis nulla sollicitudin leo, vitae convallis orci velit sed ante. In sodales sed lorem in blandit. Proin ornare cursus tortor, at tincidunt libero. Nulla in ex in augue iaculis congue ut egestas odio. Morbi tristique varius lorem, id dictum magna convallis eget. Nulla sit amet massa eu tortor facilisis dapibus. Phasellus nec porttitor enim. Donec vitae pharetra nibh. Nam convallis arcu et rutrum fringilla.

    Curabitur at mauris pharetra, ultrices tortor quis, congue tortor. In nec ornare eros. Morbi imperdiet luctus sem sit amet pellentesque. Maecenas ac accumsan sapien. Vivamus eu dui tristique, pharetra ex id, tincidunt est. Nulla viverra eu mi fringilla blandit. Ut sagittis quam nisl. In eu rutrum ex. Ut ac ante id nibh aliquam ultrices quis vel arcu. Donec molestie ipsum sapien, sed pellentesque lectus ornare sit amet. Maecenas vitae turpis arcu. Praesent ac faucibus sapien. Quisque ornare venenatis pulvinar. In felis metus, posuere non convallis id, commodo sed lorem.

    Maecenas porta risus sed ipsum luctus mattis. Integer faucibus placerat justo, sed lobortis est gravida tincidunt. Aliquam ut aliquet sem, et sodales enim. Vivamus rhoncus sodales felis a fermentum. Phasellus pellentesque fringilla lorem ut lobortis. Maecenas erat urna, viverra et egestas consectetur, eleifend vel sem. Praesent fermentum vehicula porttitor. Duis faucibus gravida nulla non volutpat. Nam tincidunt ligula in nisi efficitur, a ultricies magna aliquam. Morbi commodo posuere egestas. Maecenas quis orci interdum velit elementum lacinia nec ac dolor. Nullam sodales magna at dui pharetra efficitur.

    Nulla ultricies eros et ex tempus, eu faucibus orci dapibus. In ac sapien ornare, malesuada velit id, congue augue. Cras metus lectus, molestie id leo maximus, accumsan fermentum elit. Aliquam congue malesuada iaculis. Donec tempus enim quis tortor tristique finibus. Curabitur sed sapien quis felis venenatis porttitor quis sed dui. Phasellus in commodo orci. Vestibulum tempor purus vitae ultrices condimentum. Mauris mattis erat sed nunc suscipit tincidunt.

    Quisque porttitor dolor vel faucibus molestie. Quisque sollicitudin accumsan ipsum, a ultrices lectus dignissim interdum. Integer vestibulum mauris vitae purus suscipit, ut rutrum ante vehicula. Sed sollicitudin lectus eu justo commodo aliquet. Etiam rhoncus tellus sed diam aliquam consequat. Aenean tristique, dolor et dignissim rhoncus, turpis urna euismod elit, ac commodo nulla purus id tellus. Aliquam suscipit consequat vestibulum.

    Phasellus massa ex, pharetra nec augue eu, blandit volutpat ligula. Duis finibus nulla nunc, vitae ultrices nibh sollicitudin ac. Donec consectetur quam eu turpis dapibus, ut egestas arcu condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque posuere tincidunt sem, at fermentum leo efficitur vitae. Maecenas mattis erat quis urna accumsan, vel elementum felis pellentesque. Etiam id pretium ex. Suspendisse arcu turpis, blandit rutrum mi eu, volutpat tincidunt nunc. Duis pretium, augue in faucibus convallis, turpis nulla tempus metus, at ornare dolor turpis ac elit. Ut dapibus diam vel sem aliquet aliquet id nec sapien. Sed dictum eu ligula quis dictum. Curabitur blandit neque eu nibh vestibulum, eget tincidunt nibh aliquam.

    Nulla molestie ultricies sem, nec pharetra mi pharetra ac. Mauris aliquam vestibulum augue et convallis. Nunc rutrum quis felis at fermentum. Integer non mauris a augue finibus laoreet. Etiam dignissim tincidunt porttitor. Phasellus dignissim turpis eget accumsan hendrerit. Praesent nisl urna, semper nec luctus non, dignissim quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus elit lacus, rutrum et volutpat ac, hendrerit eu ante. Phasellus vitae erat ante. Aenean pulvinar libero eu magna auctor aliquet. Morbi facilisis, erat eu bibendum aliquet, dui augue mattis nisl, non bibendum lorem lorem sit amet odio. Vestibulum elit orci, posuere nec iaculis at, maximus quis libero.


    </div>

    <div id="square"></div>

CSS:

#red_box{

width:40%;
max-height:0px;
overflow:hidden;
background-color:white;
color:black;
border:5px double red;
position:relative;
left:55%;
transition:max-height 1s, overflow 1s;
display:inline-block;
}

#square{
float:left;
width:200px;
height:150px;
background-color:blue;


}

Javascript:

document.querySelector("#square").onclick = set_red_box;

function set_red_box(){
       if(document.querySelector("#red_box").style.maxHeight == 0){
          grow_red_box();
    }
    else{
        diminish_red_box();
    }
}

function grow_red_box(){
      document.querySelector("#red_box").style.maxHeight = "5000000px";
      document.querySelector("#red_box").style.overflow = "auto";
}

function diminish_red_box(){
      document.querySelector("#red_box").style.maxHeight = "0";
      document.querySelector("#red_box").style.overflow = "hidden";

}

还有 JFiddle：

https://jsfiddle.net/rerr6ra8/2/

Answer 1

您不能使用转换为未知 height 设置动画，这意味着 height: auto 不起作用，您需要明确设置高度。

但是，由于你是用JS改变height，你可以设置高度等于scrollHeight，即(mdn):

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

Fiddle

document.querySelector("#square").onclick = set_red_box;
var redBox = document.querySelector("#red_box");
var open = false; // redBox state used for toggle

function set_red_box() {
    if (open) {
        redBox.style.height = '0';
    } else {
        redBox.style.height = redBox.scrollHeight + 'px'; // scrollHeight is the full content height
    }

    open = !open;
}

CSS:

#red_box {
    width:40%;
    height: 0;
    overflow:hidden;
    background-color:white;
    color:black;
    border:5px double red;
    position:relative;
    left:55%;
    transition: height 1s; /** change transition to height **//
    display:inline-block;
}

Answer 2

您不能以这种方式使用过渡，因为高度取决于框中的内容 (auto)。 CSS 转换不支持此功能。然而 max-height 属性完全可以与动画一起使用。

您可以做的是使用 JavaScript 计算高度并将其用于您的代码：

var redbox = document.getElementById('red_box');
var height = redbox.clientHeight;
redbox.style.maxHeight = "0px";

https://jsfiddle.net/rerr6ra8/7/

HTML/CSS/JS：Max-Height 被错误识别并且未应用于转换

HTML/CSS/JS: Max-Height being misrecognized and not applied on transitions

html

javascript

css

css-transitions