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

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

您可以看到两个不同的包装，总高度不同，这取决于它的彩色内容。总速度是相同的，从css

transition

属性中给出，如果您想要几个具有相同持续时间的动画，这是可以的。为了获得更平滑的外观，我想将此过渡/动画效果设置为每秒像素数，这样它所需的时间就和那里的像素数一样长。更多内容=更多像素=更长的动画

我如何用普通javascript甚至css实现这一点

var wrapper1=document.getElementById（'wrapper1'）；
var wrapper2=document.getElementById（'wrapper2'）；
var header1=document.getElementById（'header1'）；
var header2=document.getElementById（'header2'）；
var wrapper1computerdheight=wrapper1.scrollHeight；
var wrapper2computedheight=wrapper2.scrollHeight；
header1.addEventListener（'click'，function（）{
如果（wrapper1.style.height=='60px'）{
wrapper1.style.height=wrapper1computerdheight+'px'；
}否则{
wrapper1.style.height='60px'；
}
})
header2.addEventListener（'click'，function（）{
如果（wrapper2.style.height=='60px'）{
wrapper2.style.height=wrapper2computedheight+'px'；
}否则{
wrapper2.style.height='60px'；
}
})

#包装器1，
#包装2{
背景：#fff；
边框：1px纯灰；
溢出：隐藏；
过渡：高度。2s线性
}
#包装1{
边际下限：40px
}
#校长1，
#校长2{
高度：60px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
光标：指针
}
#内容1{
高度：20px；
背景：蓝色
}
#内容2{
高度：600px；
背景：绿色
}

标题
标题

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

//
//生动活泼
//
var btn1=document.querySelector（'.animate'）；
btn1.addEventListener（'click'，function（）{
重置（）；
制作动画（）；
btn1.disabled=true；
});
//
// http://easings.net/#easeInOutQuart
//t:现在
//b:起始值
//c:价值变动
//d:持续时间
//
函数easeInOutQuart（t，b，c，d）{
如果（（t/=d/2）<1）返回c/2*t*t*t+b；
返回-c/2*（（t-=2）*t*t*t-2）+b；
}
函数重置（）{
document.querySelector（'.square'）.style.width=Math.floor（（Math.random（）*500）+1）+“px”；
}
函数animate（）{
var rect=document.querySelector（'.square'）；
var-from=0；
var to=window.getComputedStyle（rect，null）.getPropertyValue（“宽度”）.split（'px'）[0]；
风险值持续时间=至*10；
var start=new Date（）.getTime（）；
var timer=setInterval（函数（）{
var time=new Date（）.getTime（）-start；
var宽度=easeInOutQuart（时间、从、到-从、持续时间）；
rect.style.width=宽度+px；
如果（时间>=持续时间）{
清除间隔（计时器）；
btn1.disabled=false；
}
}, 1000 / 60);
rect.style.width=from；
}
重置（）
.square{
位置：相对位置；
显示：块；
宽度：30px；
高度：30px；
背景色：#f00；
}

动画制作
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
部分）。
没有那么棘手！干净简单，很棒！如果设置了不同的属性，如“过渡：高度线性，宽度.1s线性（始终固定），不透明度.2s线性（也固定）”，该怎么办？如何编辑其高度属性的持续时间？在这种情况下，您可以向
转换持续时间
提供一个逗号分隔的值列表，每个属性一个值，例如：
wrapper1.style.transitionDuration='0.3s，0.1s，0.1s'
并从
转换
中删除持续时间。或者，也可以添加一些额外的包装，并将其他转换应用到这些包装上！如何在延迟函数中进一步使用此计算的持续时间？在正常情况下，你只需要把毫秒值放在那里，我试着把它放在你的例子中，比如“（wrapper1computerdheight/100）”，但它不起作用。你知道怎么做吗？你说的“延迟函数”是什么意思<代码>设置超时

？如果是这样，将其乘以1000以将其转换为毫秒，即

（wrapper1computerdheight/100）*1000

。耶，对了，使用setTimeout函数，我完全忘记了将秒重新计算为毫秒！非常感谢。