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

Question

我正在尝试实现到单击按钮时的短暂过渡。 设置isOpen属性的机制工作正常。 我的问题是它不会动画，而只会一次翻转内容。 期望它应该创建一个额外的 class 但它只是用不同的 class 渲染组件。

我试过了：

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

并且：

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

我究竟做错了什么？

谢谢

Answer 1

也许有点晚了，但我输入了错误的 package。

我用了

import { css } from '@emotion/css'

代替

import { css } from '@emotion/react'