Javascript/CSS - 每秒像素的动画持续时间

Question

如何将过渡/动画的持续时间设置为每秒像素？

您会看到两个不同的包装器，它们的总高度取决于它的颜色内容。总速度是相同的，由 csstransition属性给出，如果您想要多个具有相同持续时间的动画，那没关系。为了更流畅的外观，我想将此过渡/动画效果设置为每秒像素，这样它就需要尽可能多的像素。更多内容=更多像素=更长的动画。

我怎样才能用 vanilla javascript 甚至 css 来实现这一点？

var wrapper1 = document.getElementById('wrapper1');
var wrapper2 = document.getElementById('wrapper2');
var header1 = document.getElementById('header1');
var header2 = document.getElementById('header2');
var wrapper1CmputedHeight = wrapper1.scrollHeight;
var wrapper2CmputedHeight = wrapper2.scrollHeight;

header1.addEventListener('click', function() {
  if (wrapper1.style.height === '60px') {
    wrapper1.style.height = wrapper1CmputedHeight + 'px';
  } else {
    wrapper1.style.height = '60px';
  }
})

header2.addEventListener('click', function() {
  if (wrapper2.style.height === '60px') {
    wrapper2.style.height = wrapper2CmputedHeight + 'px';
  } else {
    wrapper2.style.height = '60px';
  }
})

#wrapper1,
#wrapper2 {
  background: #fff;
  border: 1px solid grey;
  overflow: hidden;
  transition: height .2s linear
}

#wrapper1 {
  margin-bottom: 40px
}

#header1,
#header2 {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

#content1 {
  height: 20px;
  background: blue
}

#content2 {
  height: 600px;
  background: green
}

<div id="wrapper1" style="height: 60px">
  <div id="header1">
    <span>header</span>
  </div>
  <div id="content1"></div>
</div>

<div id="wrapper2" style="height: 60px">
  <div id="header2">
    <span>header</span>
  </div>
  <div id="content2"></div>
</div>

Answer 1

使用 css 过渡实现此目的的唯一方法是使用一点 JavaScript 动态计算过渡的持续时间。因此，在您的代码中，我将删除 css 中转换规则的持续时间，即

#wrapper1,
#wrapper2 {
  background: #fff;
  overflow: hidden;
  transition: height linear
}

我会在点击处理程序中设置持续时间，如下所示：

header1.addEventListener('click', function () {
    if(wrapper1.style.height === '60px') {
    wrapper1.style.height = wrapper1CmputedHeight + 'px';
    wrapper1.style.transitionDuration=(wrapper1CmputedHeight/100)+"s";
  } else {
    wrapper1.style.height = '60px';
  }
})

所以在本例中，我使用了每秒 100px 的速度（这是/100上面代码中的部分）。