HTML / CSS / JS：Max-Height被误识别，不适用于转换

Question

所以，假设我有一个蓝色正方形和一个压缩的红框：

所以我想要的是，当我点击方块时，红色盒子会重新调整它的大小以显示它的当前内容：

当我再次点击广场时，我希望红色框返回原始状态：

我想要使用Init File NAme deploy Current Time : 2015.10.01-16.04.02 ./ManualPack.sh: line 5: $'\r': command not found .zip5.10.01-16.04.02 属性来缓慢发生两种动作。

所以我有两个问题：首先，转换不适用于任何步骤。其次，一旦我把盒子带到原来的状态，我就不能再把它放大了。

以下是代码：

HTML：

transition

CSS：

<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>

使用Javascript：

#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;


}

}

和JFiddle：

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

Answer 1

您无法使用转换为未知array [ 0 => { ["lastName"]=> string(1) "w" ["projects"]=> array [ 0 => { ["projectName"] => string(29) "Bone density scanner analysis" } 1 => { ["projectName"]=> string(16) "analysis of foot" } 1 => { ["lastName"] => string(1) "x" ["projects"] => array [ 0 => { ["projectName"] => string(16) "analysis of head" } ] } ] 设置动画，这意味着height无法正常工作，您需要明确设置高度。

但是，当您使用JS更改height: auto时，您可以将高度设置为等于scrollHeight，即（mdn）：

  

Element.scrollHeight只读属性是对的度量   元素内容的高度，包括在内容上不可见的内容   屏幕由于溢出。

Fiddle

height

CSS：

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;
}

Answer 2

您不能以这种方式使用过渡，因为高度取决于框中的内容（#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; } ）。 CSS转换不支持此功能。但是auto属性完全可以用于动画。

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

max-height

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