Есть ли способ передать переменную из ReactJS в таблицу стилей CSS?

Question

Я пишу прокручивающийся тикер с переменным количеством компонентов, поэтому мне нужно его изменить, как далеко translate3d перемещает его в зависимости от количества компонентов. Единственный способ, которым я могу это сделать, - это как-то передать ему номер из файла JSX, но я не могу найти способ сделать это. Есть ли способ передать CSS переменную или какой-либо другой способ сделать то, что я хочу?

Answer 1

Существует несколько библиотек « CSS in JS », которые позволяют добавлять keyframes в анимацию компонентов. Когда вы пишете стили в своем JavaScript, вы можете напрямую использовать компоненты/компоненты ваших компонентов или некоторые другие константы для создания стилей ваших компонентов.

3 Следующие библиотеки имеют ключевые кадры поддержки (я лично использую первый):

Styled-компоненты (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)

Больше чтения о «CSS в JS» шаблон

• React: CSS in JS (presentation by Christopher Chedeau, Facebook) (8 ноября 2014)
• Writing your styles in JS ≠ writing inline styles (25 ноября 2016)

Надежда, что помогает! :)

Answer 2

Хотя не совсем то, на что я надеялся, я нашел способ заставить это работать. Оказывается, причина, по которой translate3d(100%, 0, 0) не работала, была из-за flexbox. Как только это было удалено из элемента, я смог контролировать скорость анимации, установив ширину элемента и время анимации, динамически создавая эти стили в React.