小编Flo*_*Flo的帖子

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

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

您会看到两个不同的包装器，它们的总高度取决于它的颜色内容。总速度是相同的，由 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';
  }
})

Run Code Online (Sandbox Code Playgroud)