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

Question

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

转换延迟似乎使用语法正常工作:

transition-delay: 0.08s;

计算屏幕尺寸时，calc 属性对我有用，但我无法用这种方式计算时间:

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

是否可以在没有预处理器的情况下得到这个结果？

UPDATE: Solved

This is actually a valid syntax, but it isn't supported by some browsers including Firefox and IE.

Answer 1

它确实有效——calc() 有望与测量^[1] 一起工作，涉及:length^[2] ( px , em , ex , ch , rem , % , vw , vh , vmin , vmax , mm , cm 等), Angular ^[3] ( deg , rad , grad , turn ), 时间^[4](ms，s)甚至频率和整数。

如果您查看下面的 fiddle ，您会发现转换时间的基本单位是 100 毫秒，但我将其乘以 20 以使用 calc() 实现两秒的最终转换时间。过渡时间已相应修改和计算，没有任何问题。

我怀疑 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() 很可能主要用于计算浏览器中的长度测量值，而用于其他类型的测量值则不太常见，尤其是当它仍是一项实验性功能时.这是我到目前为止所做的相当基本的浏览器测试的结果:

• Chrome (39.0):支持
• 火狐:
  • 32.0.3:不支持
  • 35.0:不支持
• Internet Explorer (11.0):不支持
• Safari (8.0.2):不支持

鉴于除了长度之外的测量普遍缺乏对 calc() 的支持，我建议您坚持使用 CSS 预处理器或 JS(取决于部署偏好)来实现您想要的效果。