Transition between states using Styled Components

Question

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?

Answer 1

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

Answer 2

I think your code will work with this transition:

transition: top 0.2s ease-out, left 0.2s ease-out;