Блог

КАК ЕСТЬ: я анимирую свои компоненты, обновляя ref.current.style свойства с помощью функции, приведенной ниже. Просто просмотрите goUpLowerCardAnimation свойства и назначьте их ref.current.style .

ПРИМЕЧАНИЕ: Карточка является функциональным компонентом.

 const Card = React.forwardRef((props, ref) => {
    return (
        <div>
            Card!
        </div>
    )
});

cardRefs = {
        card_1: React.createRef()
    };

const goUpLowerCardAnimation = {
    top: '0',
    left: '0',
    right: '0',
    transform: 'scale(1)',
    zIndex: '1',
    animationName: 'goUpLowerCard',
    animationTimingFunction: 'ease-in-out',
    animationDuration: '0.7s'
};

animate = (currentRef) => {
        for(let b in goUpLowerCardAnimation) {
            currentRef.current.style[b] = goUpLowerCardAnimation[b];
        }
    };
render() {
    return(
       <Card ref={this.cardRefs['card_1']}>
       </Card> 
    )
}
  

БЫТЬ: я не хочу обновлять ref.current.style , а просто отправляю prop с компонентом goUpLowerCardAnimation so Card , который применит анимацию на основе prop.