用于转换延迟的 CSS 计算函数

Question

我正在尝试在transition-delay属性中使用 CSS calc 函数。

转换延迟似乎使用以下语法正常工作：

transition-delay: 0.08s;

计算屏幕上的大小时，calc 属性对我有用，但我无法让它以这种方式计算时间：

transition-delay: calc(0.08s * 1);

是否可以在没有预处理器的情况下获得此结果？

更新：已解决

这实际上是一种有效的语法，但包括 Firefox 和 IE 在内的某些浏览器不支持它。

Answer 1

它确实有效 — calc() 预期可以处理测量[1]，包括：长度[2] （px， em， ex， ch ， rem ， % ， vw ， vh ， vmin ， vmax ， mm ， cm 等）， 角度[3] （ deg， rad ， grad ， turn ）， 时间^[4] （ms， s ） 甚至频率和整数。

如果你看下面的小提琴，你可以看到过渡时间的基本单位是 100ms，但我用 calc() 将其乘以 20 来实现 2 秒的最终过渡时间。转换时间经过相应修改和计算，没有任何问题。

我怀疑calc()在您的情况下"不起作用"的原因要么是 （1） 因为您使用的浏览器不支持测量单位，要么是 （2） 您将转换时间乘以系数 1，这当然会返回相同的值;)

div {
  background-color: #eee;
  width: 200px;
  height: 200px;
  transition: all calc(0.1s * 20) ease-in-out;
}
div:hover {
  background-color: #b13131;
}

<div></div>

源：

1. https://developer.mozilla.org/en-US/docs/Web/CSS/calc
2. https://developer.mozilla.org/en-US/docs/Web/CSS/length
3. https://developer.mozilla.org/en-US/docs/Web/CSS/angle
4. https://developer.mozilla.org/en-US/docs/Web/CSS/time

<小时 />

更新：我想说的是，calc()很可能主要用于计算浏览器中的长度测量值，而对于其他类型的测量则不太常见，尤其是当它仍然是一个实验性功能时。以下是我到目前为止所做的一个相当基本的浏览器测试的结果：

• 铬 （39.0）：支持
• 火狐：
  • 32.0.3：不支持
  • 35.0：不支持
• Internet Explorer （11.0）： 不支持
• Safari （8.0.2）：不支持

鉴于在长度以外的测量中普遍缺乏对calc()的支持，我建议您坚持使用 CSS 预处理器或 JS（取决于部署首选项）来实现您想要的效果。

Answer 2

我试过了，它对我来说效果很好。在这里检查代码

<div id="circle"></div>
#circle{
width:100px;
height:100px;
background:#000;
border-radius:50%;
margin:50px auto;
transition:all calc(1s*2) ease;
}
#circle:hover{
background:#555;
}

希望这对你有用 http://jsfiddle.net/p243bk8g/1/