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