时间戳

首页 > 解决方案 > 我可以将单位添加到 css calc 中的值吗？

css - 我可以将单位添加到 css calc 中的值吗？

问题描述

我现在使用 javascript 在 DOM 中存储一个值：

document.documentElement.style.setProperty('--offset', offset+'px')

稍后，我将它用作动画中计算的一部分：

@keyframes upanim {
    from    {transform: translate3d(0,calc(var(--offset) - 100vh ),0);}
    to  {transform: translate3d(0,0,0);}
}

我现在想使用相同的值来计算该动画的速度，以便速度始终是相同的像素数/秒：

animation: upanim calc(var(--offset) * 0.002)s cubic-bezier(0, 0, 0.25, 1);

问题是“px”和“s”，我想在计算中添加单位，然后将值存储在 DOM 中。这可能吗？

标签： css

解决方案

要在需要像素的属性中使用无单位 css 变量，您需要将其乘以 1px

width: calc(var(--offset) * 1px);

所以，我认为你能得到的最好的方法是设置没有尺寸的变量偏移量，并在使用时添加这个尺寸：

在代码段中，将主体悬停以查看元素以恒定速度移动：

#t1 {
  --offset: 10;
}
#t2 {
  --offset: 20;
}
#t3 {
  --offset: 40;
}

.test {
  width: 100px;
  height: 40px;
  margin: 5px;
  background-color: antiquewhite;
  transform: translateX(calc(var(--offset) * 1vh));
}

body:hover .test {
  animation: move calc(var(--offset) * 0.2s) linear forwards;
  background-color: lightgreen;
}

@keyframes move {
    from  {transform: translateX(calc(var(--offset) * 1vh));}
      to  {transform: translateX(0);}
}
<div class="test" id="t1">ONE</div>
<div class="test" id="t2">TWO</div>
<div class="test" id="t3">THREE</div>

推荐阅读