title: Animate the search list when typing on the searchbar (React)
body: <p>What I'm trying to do:
  When a character is written in the search bar, the section is updated automatically after 0,8 sec of inaction (not typing), with the results corresponding to the research. The results appear with a slide effect to the top. The filters that do not match the research disappear with a fade out effect.</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { useState } from "react";
  import SearchBar from "./SearchBar";
  import "./App.scss";
  
  function App() {
    const [searchValue, setSearchValue] = useState("");
  
    const users = [
      { name: "Jack", id: "1" },
      { name: "Lisa", id: "2" },
      { name: "Peter", id: "3" },
      { name: "Roman", id: "4" },
      { name: "Sarah", id: "5" },
      { name: "Eric", id: "6" },
      { name: "Fiora", id: "7" },
    ];
  
    const filterNames = ({ name }) =&gt; {
      return name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;h2&gt;Search&lt;/h2&gt;
        &lt;SearchBar onSearch={setSearchValue} value={searchValue} /&gt;
        &lt;ul&gt;
          {users.filter(filterNames).map((user) =&gt; (
            &lt;li className="user" key={user.id}&gt;
              {user.name}
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>SearchBar</p>
  
  <pre><code>import React from "react";
  
  function SearchBar(props) {
    return (
      &lt;input
        type="text"
        onChange={(e) =&gt; props.onSearch(e.target.value)}
        value={props.value}
      /&gt;
    );
  }
  
  export default SearchBar;
  </code></pre>
  
  <p>App.scss</p>
  
  <pre><code>.user {
    list-style: none;
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  
  @keyframes slide-in-bottom {
    0% {
      transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  </code></pre>
  
  <p>fade out effect</p>
  
  <pre><code>animation: fade-out 1s ease-out both;
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>I tried to add the slide in animation to the 'li' with className user but the animation only works in the first render and not when I type on the search bar.</p>