Javascript/CSS - 以每秒像素为单位的动画持续时间

Question

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

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

我如何使用 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

我找到了这个example here，但它似乎对你有用（经过一些调整）。在这种情况下，它实现了四次插值，但是如果需要，您可以将此算法调整为线性/其他。

//
// Animate
//
var btn1 = document.querySelector('.animate');
btn1.addEventListener('click', function() {
  reset();
  animate();
  btn1.disabled = true;
});

//
// http://easings.net/#easeInOutQuart
//  t: current time
//  b: beginning value
//  c: change in value
//  d: duration
//
function easeInOutQuart(t, b, c, d) {
  if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
  return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

function reset() {
  document.querySelector('.square').style.width = Math.floor((Math.random() * 500) + 1) + "px";
}

function animate() {

  var rect = document.querySelector('.square');
  var from = 0;
  var to = window.getComputedStyle(rect, null).getPropertyValue("width").split('px')[0];
  var duration = to * 10;

  var start = new Date().getTime();
  var timer = setInterval(function() {
    var time = new Date().getTime() - start;
    var width = easeInOutQuart(time, from, to - from, duration);
    rect.style.width = width + "px";
    if (time >= duration) {
      clearInterval(timer);
      btn1.disabled = false;
    }
  }, 1000 / 60);
  rect.style.width = from;
}

reset();

.square {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background-color: #f00;
}

<div class="square"></div>

<button class="animate">Animate</button>

Answer 2

使用 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 部分）。