React JS: как использовать адаптивные стили с помощью react-spring - PullRequest
Новая
       293

React JS: как использовать адаптивные стили с помощью react-spring

4 голосов
/ 30 мая 2020

Я новичок в создании веб-сайтов с помощью Gatsby и, следовательно, React JS.

Проблема

Я хочу создать простую анимацию на основе свойства css transform, используя react-spring. Поскольку я использую styled-components (с файлом theme.js), я хочу, чтобы анимация реагировала в зависимости от точки останова .

Проблема в том, что react-spring не примет массив , а только строки например, «10px».

✅ Адаптивные стили с react-components

Допустим, у меня есть следующее определение 

const MyDiv = styled(animated.div)`
  height: 100px;
  ${width}
`;

и я просто вызываю такой элемент 

<MyDiv width={[50, 70]} />

Как я реализовал точки останова в моем theme.js файле , это отлично работает (с использованием ThemeProvider из styled-components ).

✅ Анимация на кнопке

Давайте определим пружина анимация следующим образом: 

const [showButton, setShowButton] = useState(false);
const clickState = useSpring({
  oi: showButton ? 0 : 1,
});
const divAnimation = {
  transform: clickState.oi.interpolate(oi => `translateX(${oi * 50}px)`),
};

и назовите его 

<Button onClick={setShowButton(!showButton)}>
  <MyDiv style={{ ...divAnimation }} />
</Button>

❌ Адаптивная и анимация

Как косвенно упоминалось выше, хотелось бы иметь немного другую анимацию в зависимости от ширины окна. Итак, я придумал несколько идей, как это реализовать, но ничего из этого не работает.

Должна быть возможность, когда анимация divAnimation сдвигает div иначе. Или нет ..?

Заранее спасибо за вашу помощь.

С уважением

.

.

.

постскриптум: Зависимости этого кода 

import React, { useState } from 'react';
import styled from 'styled-components';
import { width } from 'styled-system';
import { animated } from 'react-spring';¨
import { Button } from 'rebass';
...