Javascript 合并情感中的单个CSS属性

我试图在中创建可重用的动画，但遇到了一些问题。我已经为

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

动画应用到已经定义了转换的元素时，它会被否决。例如下面的按钮。

转换将被
按钮
否决

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;
  }
`;

不太熟悉
Emotion
库，可能有一个API公开了样式值访问，就像您在
${fadeUp.transition}
中尝试的那样。但如果没有这样的API，我不会感到惊讶，因为它增加了库的复杂性。然而，希望并没有破灭，在不了解API的情况下，我们仍然可以使用javascript支持的语言特性来解决这个问题。以下是一个例子：

import React, { useState } from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/react';

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

// Notice that the annoymous function is invoked immediately to get back an object
// with properties of `css` and `transition`, so that we can access them later
export const fadeUp = (() => {
  // By defining the transition value here, we can update the transition value in one
  // place instead of updating in multiple places, including the downstream consumers
  // of the returned object
  const transition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out';

  return {
    css: css`
      opacity: 0;
      transform: translateY(25px);
      transition: ${transition};

      &.active {
        ${animatedFadeUp}
      }
    `,
    transition,
  };
})();

// Note that we need to access the `css` property explicitly here
// like this - ${fadeUp.css}
const Button = styled.button`
  ${fadeUp.css}
  background: green;
  transition: ${fadeUp.transition}, background-color 0.5s ease-in-out;

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

function App() {
  const [className, setClassName] = useState('');

  return (
    <div className="App">
      <Button className={className}>This my button component.</Button>

      <button onClick={() => setClassName(className ? '' : 'active')}>
        Toggle
      </button>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从'@emotion/styled'导入样式；
从'@emotion/react'导入{css}；
导出常量animatedFadeUp=css`
不透明度：1；
变换：translateY（0）；
`;
//请注意，会立即调用hattermous函数以获取对象
//具有'css'和'transition'属性，以便我们以后可以访问它们
导出常量fadeUp=（（）=>{
//通过在此处定义转换值，我们可以在一次更新中更新转换值
//而不是在多个地方更新，包括下游消费者
//返回对象的属性
常量转换='不透明度0.5s缓进缓出，转换0.5s缓进缓出'；
返回{
css:css`
不透明度：0；
变换：translateY（25px）；
转换：${transition}；
&.主动{
${animatedFadeUp}
}
`,
过渡，
};
})();
//请注意，我们需要在此处显式访问“css”属性
//像这样-${fadeUp.css}
const Button=styled.Button`
${fadeUp.css}
背景：绿色；
过渡：${fadeUp.transition}，背景色0.5s缓进缓出；
&：悬停，
&：焦点，
&.主动{
背景：金；
}
`;
函数App（）{
const[className，setClassName]=useState（“”）；
返回(
这是我的按钮组件。
setClassName（className？“”：“活动”）}>
切换
);
}
导出默认应用程序；

简而言之，我们创建了一个对象，它保存
css
和
transition
的信息，以便以后使用它。这种方法的缺点是，我们需要记住，当使用
fadeUp
时，我们必须通过显式访问
fadeUp.css
来区别对待它，这与其他
情绪
创建的css不同。
您可以将其用作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>
)

export const animatedFadeUp={
不透明度：1，
转换：“translateY（0）”，
};
导出常量fadeUp={
不透明度：0，
变换：“translateY（变量（--间距介质））”，
过渡：`不透明度0.5s缓进缓出，
转换0.5s轻松输入输出`，
['html.no-js&']：{
…动画Fadeup
}
};
常量应用=（）=>(
点击我
)
虽然我做了一些小的调整，但是使用了对象而不是模板文字，成功了，泰！