如何在Emotion中合并单个CSS属性？解决复用动画时的transition覆盖问题

这确实是CSS过渡属性的一个常见“坑”——当同一个选择器里多次声明transition时，后面的规则会完全覆盖前面的，而不是自动合并属性。不过在Emotion里，我们有几种简洁的方式实现你想要的属性合并效果：

方案1：拆分过渡属性为独立变量（最推荐） #

我们可以把fadeUp动画里的过渡规则单独抽成一个变量，这样就能在需要的地方直接引用并合并到新的transition声明中：

// 单独抽离过渡属性
export const fadeUpTransition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out';

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

export const fadeUp = css` 
  opacity: 0; 
  transform: translateY(var(--spacing-medium)); 
  transition: ${fadeUpTransition}; 
  html.no-js & { ${animatedFadeUp} } 
`;

然后在你的Button组件里，就可以像你预想的那样合并过渡属性了：

const Button = styled.button` 
  ${fadeUp} 
  background: orange; 
  // 合并动画过渡和按钮自身的背景过渡
  transition: ${fadeUpTransition}, background-color 0.5s ease-in-out; 
  &:hover, &:focus { 
    background: gold; 
  } 
`;

这种方式的好处是代码清晰、可维护性高，你可以在任何需要复用这个动画过渡的地方直接引用fadeUpTransition变量。

方案2：利用CSS拆分过渡子属性（备选） #

如果你不想额外抽离变量，也可以通过分别声明transition-property、transition-duration、transition-timing-function这些子属性来实现合并。不过这种方式需要你手动对应每个属性的时长和缓动函数，维护起来稍显繁琐：

const Button = styled.button` 
  ${fadeUp} 
  background: orange; 
  // 合并过渡属性列表
  transition-property: opacity, transform, background-color;
  // 对应每个属性的时长
  transition-duration: 0.5s, 0.5s, 0.5s;
  // 对应每个属性的缓动函数
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
  
  &:hover, &:focus { 
    background: gold; 
  } 
`;

方案3：使用Emotion的css组合函数（进阶） #

Emotion的css函数支持组合多个样式规则，不过对于transition这种会被覆盖的属性，还是需要我们手动处理合并逻辑。你可以写一个小工具函数来合并过渡属性：

// 合并过渡属性的工具函数
const mergeTransitions = (...transitions) => transitions.join(', ');

const Button = styled.button` 
  ${fadeUp} 
  background: orange; 
  transition: ${mergeTransitions(fadeUpTransition, 'background-color 0.5s ease-in-out')}; 
  &:hover, &:focus { 
    background: gold; 
  } 
`;

这个方案适合需要频繁合并过渡属性的场景，能让代码更整洁。

内容的提问来源于stack exchange，提问作者StackByMe