"用于转换延迟的 CSS calc 函数"

Question

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

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

transition-delay: 0.08s;

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

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

没有预处理器是否有可能得到这个结果？

更新：已解决

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

Answer 1

它确实有效 - calc()<\/code>预计可用于测量[1]<\/sup>包括：长度<\/strong>[2]<\/sup> （ px<\/code> 、 em<\/code> 、 ex<\/code> 、 ch<\/code> 、 rem<\/code> 、 %<\/code> 、 vw<\/code> 、 vh<\/code> 、 vmin<\/code> 、 vmax<\/code> 、 mm<\/code> 、 cm<\/code>等），角度<\/strong>[3]<\/sup> ( deg<\/code> , rad<\/code> , grad<\/code> , turn<\/code> ), time<\/strong> [4]<\/sup> ( ms<\/code> , s<\/code> ) 甚至频率<\/strong>和整数<\/strong>。

如果你看下面的小提琴，你可以看到过渡时间的基本单位是 100 毫秒，但我已经将它乘以 20 以使用calc()<\/code>实现两秒的最终过渡时间。 过渡时间被相应地修改和计算，没有问题。

我怀疑calc()<\/code>在您的情况下“不起作用”的原因是（1）因为您使用的浏览器不支持测量单位，或者（2）您将转换时间乘以因子 1，当然返回相同的值 ;)

来源：

https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc<\/a><\/li>
1. https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/length<\/a><\/li>
2. https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/angle<\/a><\/li>
3. https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/time<\/a><\/li><\/ol>

   ---

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

   • 铬（39.0）：支持<\/strong><\/li>
   • 火狐：
     32.0.3：不支持<\/em><\/li>
     • 35.0：不支持<\/em><\/li><\/ul><\/li>
     • Internet Explorer (11.0)：不支持<\/em><\/li>
     • Safari (8.0.2)：不支持<\/em><\/li><\/ul>

       鉴于在长度以外的测量中普遍缺乏对calc()<\/code>的支持，我建议您坚持使用 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;
}