CSS 过渡不适用于情感样式组件

Question

我遇到了 CSS 转换问题。 当选定的状态值发生变化时，CSS 宽度也会发生变化。我想对宽度应用过渡效果，但如果我使用样式化组件，则过渡不起作用。

这是我的样式组件代码：

    const Bar = styled.div<{ selected: boolean }>`
        width: 28px;
        height: 6px;
        cursor: pointer;
        border-radius: 8px;
        background-color: #ffffff66;
        transition: width 1s ease;
        ${({ selected }) =>
          selected &&
          `
            width: 40px;
            background-color: #fff;
          `}
      `;

此代码不使用样式组件（它有效）：

<div
  css={css`
    width: 28px;
    height: 6px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ffffff66;
    transition: width 1s ease;
    ${selected && "width: 40px; background-color: #fff;"}
  `}
/>

我不知道为什么在使用样式组件时不应用过渡。请帮助我

Answer 1

您的样式语法错误，

transition

仍然有效，但您无法更改

width

和

background

。

在 css 字符串中嵌入 css 字符串时，必须使用

ThemedCssFunction - css

（模板文字）

const Bar = styled.div<{ selected: boolean }>`
    width: 28px;
    height: 6px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ffffff66;
    transition: width 1s ease;
    ${({ selected }) =>
      selected &&
      // THIS LINE      
      css`
        width: 40px;
        background-color: #fff;
      `}
`;