我正在编写一个组件数量可变的滚动滚动条，因此我需要它来更改translate3d根据组件数量移动它的距离。我能想到的唯一方法就是以某种方式向它传递JSX文件中的一个数字，但我找不到这样做的方法。有没有什么方法可以传递CSS变量，或者其他某种方式来完成我想要的操作？

---

解决方案

有几个« CSS in JS »库允许您向组件动画中添加keyframes。在JavaScript中编写样式时，可以直接使用组件属性/状态或某些其他常量来创建组件样式。

以下3个库都支持关键帧(我个人一直在使用第一个)：

样式组件(GitHub)

import styled, { keyframes } from 'styled-components';

const rotate360 = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
`;

魅力(GitHub)

import { css } from 'glamor'

let bounce = css.keyframes('bounce', {
  '0%': { transform: 'scale(0.1)', opacity: 0 },
  '60%': { transform: 'scale(1.2)', opacity: 1 },
  '100%': { transform: 'scale(1)' }
})

<div {...css({
  animation: `${bounce} 2s`,
  width: 50, height: 50,
  backgroundColor: 'red'
})}>
  bounce!
</div>

Aphrodite(GitHub)

const translateKeyframes = {
  '0%': { transform: 'translateX(0)' },
  '50%': { transform: 'translateX(100px)' },
  '100%': { transform: 'translateX(0)' },
};

const opacityKeyframes = {
  'from': { opacity: 0 },
  'to': { opacity: 1 }
};

const styles = StyleSheet.create({
  zippyHeader: {
    animationName: [translateKeyframes, opacityKeyframes],
    animationDuration: '3s, 1200ms',
    animationIterationCount: 'infinite',
  },
});

<div className={css(styles.zippyHeader)}>...</div>

了解有关«JS中的CSS»模式的详细信息

• React: CSS in JS (presentation by Christopher Chedeau, Facebook)(2014年11月8日)
• Writing your styles in JS ≠ writing inline styles(2016年11月25日)

希望能有所帮助！：)