转换翻译未从css中获取

Question

所以我试图将转换添加到slideout组件上，但由于某些原因，翻译部分没有被选中。持续时间显然在发生，但翻译却没有。

.enterLeave {
--tw-translate-x: 0px;
transform: translateX(--tw-translate-x) translateY(0) rotate(0) skewX(0)
skewY(0) scaleX(1) scaleY(1);
transition-property: background-color, border-color, color, fill, stroke,
opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.translateX0 {
--tw-translate-x: 0px;
}
.translateXFull {
--tw-translate-x: 100%;
}

function Slideover({ children, isOpen, setIsOpen }) {
return (
<Transition
show={isOpen}
enter={"enterLeave"}
enterFrom={"translateXFull"}
enterTo={"translateX0"}
leave={"enterLeave"}
leaveFrom={"translateX0"}
leaveTo={"translateXFull"}
>
<div className={`${"slideoverWrapper"}`}>
<div className={"hfullFlexCol1"}>{children}</div>
</div>
</Transition>
);
}

我可以让它在不透明度方面工作得很好，但当我尝试进行转换时，它会破坏

Answer 1

您正在使用CSS自定义属性(变量(，但没有正确引用它

translateX(--tw-translate-x)

应该是

translateX(var(--tw-translate-x))