I have a styled component that has its position and dimensions calculated using a prop. This prop changes upon a button click which also changes the style of the component. I would like to transition between these style states. I have the following code:
const InteractiveTimelineBubble = styled.div<{
position:
| "center"
| "left-big"
| "right-big"
| "left-small"
| "right-small"
| "left-hidden"
| "right-hidden";
}>`
--dimensions: ${(props) =>
InteractiveTimelineBubbleDimensions(props.position)};
--left-percentage: ${(props) =>
InteractiveTimelineBubbleLeftPercentage(props.position)};
transition: transform 0.2s ease-out;
position: absolute;
z-index: -1;
width: var(--dimensions);
height: var(--dimensions);
border-radius: 1000px;
background-color: red;
top: calc(50% - (var(--dimensions) / 2)); // = center
left: calc(var(--left-percentage) - (var(--dimensions) / 2));
`;
I used transition
here to animate between the states, but that does not seem to be working. Am I misusing transition
here?
How can I transition between these prop changes?
CodePudding user response:
If your expectation is to animate width, height, top & left when its value changes, set them in transition
instead of setting transform
.
transition: width <duration> <timing-function> <delay>, height <duration> <timing-function> <delay>, top <duration> <timing-function> <delay>, left<duration> <timing-function> <delay>;
For shorthands refer here
CodePudding user response:
I think your code will work with this transition:
transition: top 0.2s ease-out, left 0.2s ease-out;