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]，涉及：长度^[2] (px, em, ex, ch, rem, %, vw, vh, vmin, vmax, mm, cm 等), 角度^[3] (deg, rad, grad, turn), time^[4] (ms, s) 甚至频率和整数.

如果你看下面的fiddle，你可以看到过渡时间的基本单位是100毫秒，但我用它乘以20得到两秒的最终过渡时间calc()。过渡时间已相应修改和计算，没有任何问题。

我怀疑 calc() 在您的案例中“不起作用”的原因是 (1) 因为您使用的浏览器不支持测量单位，或者 (2) 您将转换时间乘以系数 1，当然 returns 是相同的值 ;)

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

div:hover {
  background-color: #b13131;
}

<div></div>

来源：

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

Chrome (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/

CSS 转换延迟的计算函数

CSS calc function for transition-delay

css

css-transitions