PL
React - jak zrobić lewostronne animowane menu
1 points
W tym krótkim artykule chcielibyśmy pokazać, jak stworzyć animowane menu w React .
Poniższe rozwiązanie pokazuje animowane menu wysuwające się z lewej strony po naciśnięciu przycisku.
Praktyczny przykład:
xxxxxxxxxx1
// Uwaga: Odkomentuj wiersze importu podczas pracy z kompilatorem JSX.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const commonStyle = {6
position: 'fixed',7
left: 0,8
top: 0,9
bottom: 0,10
background: 'silver',11
overflow: 'hidden',12
transition: '0.3s'13
};14
const visibleStyle = {15
commonStyle,16
width: '200px'17
};18
const hiddenStyle = {19
commonStyle,20
width: '0px'21
};22
23
const App = () => {24
const [visible, setVisible] = React.useState(false);25
return (26
<div style={{height: '200px'}}>27
{!visible && <button onClick={() => setVisible(true)}>Pokaż</button>}28
<div style={visible ? visibleStyle : hiddenStyle}>29
<button onClick={() => setVisible(false)}>Ukryj</button>30
<div>31
1<br />32
2<br />33
3<br />34
</div>35
</div>36
</div>37
);38
};39
40
const root = document.querySelector('#root');41
ReactDOM.render(<App />, root );Uwaga:
Dzięki składni rozwinięcia (
...) możemy łączyć obiekty powstałe z obiektów stylów.