在帶有 @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'