在带有 @emotion/core 的样式组件中使用过渡

Question

I am trying to implement a short transition to when a button is clicked. The mechanism that sets the isOpen property works fine. My problem is that it won't animate, but only flip the content at once. The expectation was that it should create an extra class but it just renders the component with a different class.

I tried:

const StyledButton = styled(Button)`
    transition: transform 0.25s linear;
    transform: rotate(0deg);
    ${({ isOpen }) => isOpen && css`transform: rotate(180deg)` }
  `;

And also:

    transform: ${({ isOpen }) => isOpen ? 'rotate(180deg)' : 'rotate(0de)' 

What am I doing wrong?

Thanks

Answer 1

Maybe a bit late, but i imported the wrong package.

I used

import { css } from '@emotion/css'

instead of

import { css } from '@emotion/react'