gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:16:06 31 4
gpt4 key购买 nike

我现在正在使用 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 变量,需要将其乘以 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>

关于css - 我可以将单位添加到 css calc 中的值吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50019168/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com