Javascript/CSS-动画持续时间(以像素/秒为单位) [英] Javascript/CSS - animation duration in pixel per second

问题描述

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

How can i set the duration of an transition/animation to pixel per second?

您会看到两种不同的包装纸，它们的总高度取决于其彩色内容.从css transition 属性给出的总速度是相同的，如果您想要多个具有相同持续时间的动画，也可以.为了使外观更平滑，我想将此过渡/动画效果设置为每秒像素，以便在那里花费尽可能多的像素.更多的内容=更多的像素=更长的动画.

You see the two different wrappers, with a different total height depending on it's colored content. The total speed is the same, given from the css transition attribute, thats okay if you want several animations with the same duration. For a smoother look i want to set this transition/animation effect to pixel per second so it takes as long as many pixels there. More content = more pixel = longer animation.

我该如何使用香草javascript甚至CSS做到这一点?

How can i achieve this with vanilla javascript or even 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>

推荐答案

使用CSS转换的唯一方法是使用少量JavaScript动态计算转换的持续时间.因此，在您的代码中，我将删除CSS中过渡规则的持续时间，即.

The only way to do this with css transitions, is to dynamically calculate the duration of the transition using a little javascript. So, in your code, I would remove the duration for the transition rule in your css, i,e.

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

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

and I would instead set the duration in the click handler as follows:

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 部分).

So in this case, I've used a speed of 100px per second (this is the /100 part in the above code).

这篇关于Javascript/CSS-动画持续时间(以像素/秒为单位)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！