[Edit]

React - wie erstellt man ein animiertes Menü auf der linken Seite

1 contributors

2 contributions

0 discussions

3 points

Created by:

Nikki

10520

In diesem kurzen Beitrag wird gezeigt, wie ein animiertes Menü in React erstellt werden kann.

Die untenstehende Lösung zeigt ein animiertes Menü, das bei button-Klickereignis auf die Menütaste von der linken Seite her verschoben wird.

Praktisches Beispiel:

xxxxxxxxxx
 
// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
// import React from 'react';
// import ReactDOM from 'react-dom';
​
const commonStyle = {
    position: 'fixed',
    left: 0,
    top: 0,
    bottom: 0,
    background: 'silver',
    overflow: 'hidden',
    transition: '0.3s'
};
const visibleStyle = {
    ...commonStyle,
    width: '200px'
};
const hiddenStyle = {
    ...commonStyle,
    width: '0px'
};
​
const App = () => {
    const [visible, setVisible] = React.useState(false);
    return (
      <div style={{height: '200px'}}>
        {!visible && <button onClick={() => setVisible(true)}>Anzeigen</button>}
        <div style={visible ? visibleStyle : hiddenStyle}>
          <button onClick={() => setVisible(false)}>Ausblenden</button>
          <div>
            1<br />
            2<br />
            3<br />
          </div>
        </div>
      </div>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );