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

【问题标题】：Using transition in a styled component with @emotion/core在带有 @emotion/core 的样式组件中使用过渡
【发布时间】：2020-09-08 02:47:30
【问题描述】：

我正在尝试实现到单击按钮时的短暂过渡。设置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)'

我做错了什么？

谢谢

【问题讨论】：

isOpen变量是对应点击状态还是想要在点击按钮时根据isOpen变量旋转不同的值？
@subashMahapatra isOpen 在按钮被点击时切换
您是否尝试过将 :active 伪选择器用于 transform: rotate(180deg) 并保留 transform: rotate(0deg) 作为基本样式。 :active 伪选择器应在单击按钮时触发旋转。

标签： javascript reactjs emotion css-in-js

【解决方案1】：

可能有点晚了，但是我导入了错误的包。

我用过

import { css } from '@emotion/css'

而不是

import { css } from '@emotion/react'

【讨论】：