Introduzione ad AutoAnimate in React
AutoAnimate è una piccola ma potennte libreria per creare animazioni in Javascript e Typescript.
E' compatibile con diverse librerie / framework; in questo articolo vediamo come usarla in React.
Prima di tutto installiamola con npm:
npm install @formkit/auto-animate
Qui sotto un esempio in cui mostriamo/nascondiamo un test quando clicchiamo sul div:
import React from 'react';
import {useState, useRef, useEffect} from 'react'
import autoAnimate from '@formkit/auto-animate'
import './App.css';
function App() {
const [show, setShow] = useState(false);
const parent = useRef(null);
const reveal = () => setShow(!show);
useEffect(() => {
parent.current && autoAnimate(parent.current)
}, [parent]);
return (
<div id="parent" ref={parent}>
<strong className="dropdown-label" onClick={reveal}>Clicca!</strong>
{show && <p className="dropdown-content">
<hr/>
Questo è il testo nascosto!
</p>}
</div>
);
}
export default App;
Come vedete c'è un'animazione, e per impostarla abbiamo usato pochissimo codice.
Questo il CSS che ho usato per visualizzare meglio la pagina (non è obbligatorio ovviamente):
#parent {
margin: 50px auto;
padding: 20px;
border: 1px solid black;
border-radius: 10px;
width: 70%;
}
Enjoy!
javascript typescript react npm autoanimate
Commentami!