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

Question

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

我试过了：

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)' 

我究竟做错了什么？

谢谢

标签： javascriptreactjsemotioncss-in-js

Answer 1

也许有点晚了，但我导入了错误的包。

我用了

import { css } from '@emotion/css'

代替

import { css } from '@emotion/react'