CODEWITHSUNDEEP
csscss-animationscss-transitionstranslation
Paul DeVito
Paul DeVito

Reputation: 1912

Transform translation not getting picked up from css

So I'm trying to add transitions onto a slideout component, but the translation portion isn't getting picked up for some reason. The duration is clearly happening, but the translation is not.

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

I can get it working fine for opacity, but when I try to do the transition it breaks down

Upvotes: 0

Views: 124

Answers (1)

Paulie_D
Paulie_D

Reputation: 114979

You are using a CSS Custom Property (variable) but you are not referencing it properly

 translateX(--tw-translate-x)

should be

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

Upvotes: 1

Related Questions