PL
React - właściwość transition (CSS)
0 points
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:
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const myComponentNormal = {6
width: '120px',7
height: '120px',8
background: 'goldenrod',9
transition: '0.5s'10
}11
12
const myComponentBig = {13
width: '200px',14
height: '200px',15
background: 'yellowgreen',16
transition: '0.5s'17
}18
19
const MyComponent = () => {20
const [bigSize, setBigSize] = React.useState(false);21
const handleClick = () => setBigSize(!bigSize);22
return (23
<div style={{height: '220px'}}>24
<div style={bigSize ? myComponentBig : myComponentNormal} >25
<button onClick={handleClick}>Zmień rozmiar</button>26
</div>27
</div>28
)29
}30
31
const root = document.querySelector('#root');32
ReactDOM.render(<MyComponent />, root );Uwaga:
Jeśli czas trwania nie zostanie określony, zostanie przypisana wartość domyślna, czyli 0 (animacja będzie niewidoczna).