React - właściwość transition (CSS)

W tym artykule chcielibyśmy pokazać, jak używać właściwości stylu transition w Reakcie.

Poniższy przykład przedstawia dwa obiekty stylów: myComponentNormal oraz myComponentBig z właściwością transition ustawioną na '0.5s'. Oznacza to, że nasz komponent będzie płynnie zmieniał wartości swoich właściwości w określonym czasie (0.5s).

Uruchamialne rozwiązanie:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const myComponentNormal = {
    width: '120px',
    height: '120px',
    background: 'goldenrod',
    transition: '0.5s'
}

const myComponentBig = {
    width: '200px',
    height: '200px',
    background: 'yellowgreen',
    transition: '0.5s'
}

const MyComponent = () => {
    const [bigSize, setBigSize] = React.useState(false);
  	const handleClick = () => setBigSize(!bigSize);
    return (
        <div style={{height: '220px'}}>
            <div style={bigSize ? myComponentBig : myComponentNormal} >
                <button onClick={handleClick}>Zmień rozmiar</button>
            </div>
        </div>
    )
}

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent />, root );

Uwaga:
Jeśli czas trwania nie zostanie określony, zostanie przypisana wartość domyślna, czyli 0 (animacja będzie niewidoczna).