当从Javascript完全完成时，CSS高度转换不起作用

Question

我正在尝试制作一个上下滑动的动画。切换页面的各个部分。当在呈现页面之前，高度在CSS中被"硬编码"为210px，并且我从按钮调用Javascript函数时，一切都会正常工作。

但当我尝试动态地这样做时，使用Javascript将"硬编码"保持在最低限度。它仍然对高度进行更改。但过渡效应并没有发生。

以下是突出问题的代码片段。我不明白为什么这种差异会破坏过渡。

function slideUp() {
var target = document.getElementById("targetDiv");
target.style.height = "" + target.clientHeight+"px"; // taking the rendered height of the div and setting it in CSS to mimic the pre set height in CSS 
target.style.transition = "height 1.0s ease-in 0s";
target.style.height = "0px";
}

.divStyle {
/* height: 200px;  without this the animation does not work */
background: blue;
overflow: hidden;
}

<div id="targetDiv" class="divStyle">
random content 
</div>
<button onclick="slideUp()"> Slide up </button>

Answer 1

使用max-height和setTimeout"破解"对我有效：

function slideUp() {

var target = document.getElementById("targetDiv");

target.style.maxHeight = target.clientHeight + "px";

setTimeout(function() {
target.style.maxHeight = 0;
}, 10);
}

.divStyle {
background: blue;
overflow: hidden;
transition: max-height 1s ease-in 0s;
}

<div id="targetDiv" class="divStyle">
random content 
</div>
<button onclick="slideUp()"> Slide up </button>

然而，这不是一种干净的方式。考虑使用transform: scaleY(0)。

Answer 2

有多种方法可以实现这一目标，在您的情况下，您只需要初始化稍后应该更改的样式，所以只需使用window.onload并初始化值。

var org = "";
window.onload = function() {
var target = document.getElementById("targetDiv");
org = target.clientHeight;
target.style.height = "" + target.clientHeight + "px";
}
function slideUp() {
var target = document.getElementById("targetDiv");
target.style.transition = "height 1.0s ease-in 0s";
if (target.clientHeight == org) {
target.style.height = "0px";
} else {
target.style.height = org + "px";
}
}

.divStyle {
/* height: 200px;  without this the animation does not work */
background: blue;
overflow: hidden;
}

<div id="targetDiv" class="divStyle">
random content
</div>
<button onclick="slideUp()"> Slide up </button>

Answer 3

这样，如果有人来这里，给出的答案是好的，只是在我需要的当前情况下没有。我最终的办法如下。

function slideDown( targetId ){
var target = document.getElementById(targetId);
target.style.height =  target.children[0].clientHeight + "px";
}
function slideUp( targetId ) {
var target = document.getElementById(targetId);
target.style.height = "0px";
}

.parentDivStyle{
overflow: hidden;
transition: height 0.5s ease-in 0s;
height: 0px;
background: blue;
}
.childDivStyle {
background: green;
padding: 10px 10px 10px 10px;
}

<div id="parent" class="parentDivStyle">
<div class="childDivStyle">
random stuff
text text text...........
</div>
</div>
<button onclick="slideUp('parent')"> Slide Up </button>
<button onclick="slideDown('parent')"> Slide Down </button>

这实际上是一条被删除的回复中的评论。我知道它被删除的原因。很有用。

Answer 4

如前所述：将高度/最大高度值设置为auto/noe停止从工作过渡。

而不是将最大高度设置为指定的、大于需要的高度max-height(如果设置为非常高的数字，则会导致转换(，我向内容包装器添加了转换和最大高度，并使用JavaScript读取内容的实际高度。通过这种方式包装器max-height被设置为其内容的当前呈现的高度。这使它具有固定的内联高度。

这个解决方案的问题是，如果用户决定调整他的窗口，比如说，一个更窄的屏幕(即从横向旋转到纵向移动设备上的模式(，固定的最大高度导致内容被截断。这个解决方法是设置setTimeout()函数来设置最大高度在转换刚刚结束之后将包装器的返回CCD_ 8。(none为max-height属性的默认初始CSS值(

同样的事情需要在"；承包；过渡这个包装器的最大高度需要是一个固定值，以便转换到工作状态。因此，需要再次从其内容中读取高度(可能实际上在此期间发生了更改(，应用于包装器，然后在短时间后延迟(在我的情况下，50毫秒似乎有效，延迟并不明显(开始过渡。

下面是一个在按下按钮时扩展div内容的示例：

HTML:

<div id="content-wrapper">
<div id="content">
<!-- a lot of text content -->
</div>
</div>
<button id="show-more" type="button">Show More</button>

CSS：

#content-wrapper {
/* Initial max-height, can be any value including 0 */
max-height: 270px;
overflow: hidden;
/* transition occurs on max-height change with specified delay; */
transition: max-height 0.7s;
}
#content {
/* This makes margin of the contents be respected by the container
i.e. the height of the container its childrens' margins */
overflow: hidden;
}

JS:

function resetHeight() {
// make max-height of wrapper responsive again
wrapper.style.maxHeight = "none";
}

function toggleText() {
// check if content-wrapper is open
if (wrapper.className.includes("open")) {
// if is open, close content-wrapper and set initial max-height to wrapper
let contentHeight = window.getComputedStyle(content).height;
// sets max-height back from none to computed content height
wrapper.style.maxHeight = contentHeight;
// give it some time to reset the transition trigger caused by previous statement
setTimeout(function() {
wrapper.classList.remove("open");
wrapper.style.maxHeight = "270px"; // reset to our initial max-height
button.textContent = "Show More";
}, 50)
} else {
// if not open, open content-wrapper then use content's height to set the
// max-height of wrapper
wrapper.classList.add("open");
let contentHeight = window.getComputedStyle(content).height;
wrapper.style.maxHeight = contentHeight;
button.textContent = "Show Less";
setTimeout(resetHeight, 700) // the timeout is the same as the transition time
}
}
const content = document.getElementById("content")
const wrapper = document.getElementById("content-wrapper");
const button = document.getElementById("show-more");
button.addEventListener("click", toggleText);

这是我在StackOverflow上的第一个答案，所以如果有什么可以改进的话请告诉我。