Languages
[Edit]
DE

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

3 points
Created by:
Nikki
10460

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:

// ONLINE-RUNNER:browser;

// 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 );

Hinweis: mithilfe der spread syntax (...) kann man Objekte kombinieren, die mit Stilobjekten ertstellt wurden.

Referenzen

ReactJS (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join