Условно анимируйте компонент React с помощью react-spring

У меня есть компонент реакции, и я хочу анимировать его при изменении состояния компонента.

Я использую useReducer const [state, dispatch] = useReducer(reducer, initialState);. Затем при нажатии я обновляю state.isOpen с false на true или наоборот. В том же компоненте у меня есть это

const wrapperStyles = useSpring({
    transform: state.isOpen ? 'translate3d(0, 0, -300px)' : 'translate3d(0, 0, 0)'
  });

Наконец, компонент потребляет его вот так <StyledWrapper style={wrapperStyles}> Я ожидаю, что преобразование будет применено и изменено при изменении состояния, но это не так. Понятия не имею, что делаю не так, я следую их простым инструкциям на сайте.

Изменить: я пробовал использовать opacity вместо transform, и он отлично работает, поэтому я делаю что-то не так с преобразованием css?


reactjs animation react-spring
person Kaiser Soze    schedule 22.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я отвечаю на свой вопрос, поэтому причина, по которой он не работает, заключается в том, что я использовал другие значения.

с 0 до 300px. Это должно быть то же значение, поэтому измените его на transform: state.isOpen ? 'translate3d(0, 0, -300px)' : 'translate3d(0, 0, **0px)**', где 0px имеет значение :)

Спасибо за помощь!

person Kaiser Soze    schedule 22.12.2019

arrow_upward
0
arrow_downward

Вы читаете эту страницу.
Я ищу react-spring,
Если вы используете преобразование, вы используете import {useTransition, animated} from 'react-spring'

не useSpring()

https://www.react-spring.io/docs/hooks/use-transition

const [items, set] = useState([...])
const transitions = useTransition(items, item => item.key, {
from: { transform: 'translate3d(0,-40px,0)' },
enter: { transform: 'translate3d(0,0px,0)' },
leave: { transform: 'translate3d(0,-40px,0)' },
})
return transitions.map(({ item, props, key }) =>
<animated.div key={key} style={props}>{item.text}</animated.div>
)
person seunggabi    schedule 22.12.2019