未从 css 获取转换翻译

Question

因此，我正在尝试将过渡添加到滑出组件，但由于某种原因，翻译部分没有被拾取。持续时间明明在发生，但翻译却没有。

.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>
  );
}

我可以让它在 opacity, but when I try to do the transition it breaks down

时正常工作

Answer 1

您正在使用 CSS 自定义属性（可变）但您没有正确引用它

 translateX(--tw-translate-x)

应该是

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

未从 css 获取转换翻译

Transform translation not getting picked up from css

css

translation

css-transitions

css-animations