javascript - 在 Emotion 中合并单个 CSS 属性

Question

我正在尝试在 Emotion 中创建可重复使用的动画但遇到了一些问题。我为 fadeUp 定义了一个动画。效果很好。

export const animatedFadeUp = css`
  opacity: 1;
  transform: translateY(0);
`;

export const fadeUp = css`
  opacity: 0;
  transform: translateY(var(--spacing-medium));
  transition: opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out;

  html.no-js & {
    ${animatedFadeUp}
  }
`;

但是当我尝试应用 fadeUp动画到已经定义了过渡的元素会被否决。例如下面的按钮。 transition将被 button 否决.

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: gold;
  }
`;

有没有办法只组合一个属性？就像是:

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: ${fadeUp.transition},
    background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: gold;
  }
`;

Answer 1

您可以将其用作 CSS 对象，而不是将其作为 CSS 标记的模板文字或使用样式组件传递。通过这样使用，它会更灵活，更容易引用它们的属性。

<p
  css={{
    color: 'red'
 }}
>Hello World</p>

所以你的代码会变成

export const animatedFadeUp = {
  opacity: 1,
  transform: 'translateY(0)',
};

export const fadeUp = {
  opacity: 0,
  transform: 'translateY(var(--spacing-medium))',
  transition: `opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out`,

  ['html.no-js &']: {
    ...animatedFadeUp
  }
};

const App = () => (
  <button
    css={{
      ...fadeUp,
      background: 'orange',
      transition: `${fadeUp.transition},
        background-color 0.5s ease-in-out`,

      ['&:hover']: {
        background: 'gold',
      },
      ['&:focus']: {
        background: 'gold',
      }
    }}
  >Click Me</button>
)