用于转换延迟的 CSS calc 函数答案

【问题标题】：CSS calc function for transition-delay用于转换延迟的 CSS calc 函数
【发布时间】：2022-01-29 20:42:15
【问题描述】：

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

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

transition-delay: 0.08s;

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

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

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

更新：已解决

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

【问题讨论】：

似乎没有语法错误。乘以 1 会发生什么？
您是否尝试过将“s”从 calc 中移出？转换延迟：calc(0.08 * 1) s;
@Giorgio：这不是有效的语法。

标签： css css-transitions

【解决方案1】：

它确实有效 - calc() 预计可用于测量^[1] 涉及：长度^[2] (px , em, ex, ch, rem, %, vw, vh, vmin, vmax, @987654338 等), @987654338 >角度^[3]（deg、rad、grad、turn）、时间^{[4] sup> (ms, s) 甚至是频率和整数。}

如果你看下面的小提琴，你可以看到过渡时间的基本单位是 100 毫秒，但我已经将它乘以 20 以实现使用calc() 的最终过渡时间为 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;
}

&lt;div&gt;&lt;/div&gt;

来源：

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

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

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

【讨论】：

实际上，这对我在 Firefox 或 IE 中不起作用。它仅适用于 Chrome。看起来他们两个有一些事情要做，因为它肯定是有效的 CSS。
@BoltClock 是的。刚刚更新了我的答案，以说明calc() 可能不适用于某些浏览器中的时间测量。不过真的很丢脸。
看来您是对的，我的代码适用于 Chrome，但不适用于其他浏览器。也许是因为这个错误已经在 Webkit bugs.webkit.org/show_bug.cgi?id=138784 解决了
Firefox 与此问题相关的错误跟踪：bugzilla.mozilla.org/show_bug.cgi?id=956573

【解决方案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/

【讨论】：