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

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

Answer 2

我找到了这个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>

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

2 个答案: