Reversing the animation in CSS

Question

what I'm trying to do: when something is typed in the search bar, the user names that are not searched for must fade out and disappear (which works fine), and I'm trying to reverse this animation when the letters are deleted in the search bar or the search bar is cleared.

App.js

import React, { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import "./App.scss";

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" },
];

function App() {
  const [searchValue, setSearchValue] = useState("");
  const [searchFilter, setSearchFilter] = useState(users);

  return (
    <div className="App">
      <h2>Search</h2>
      <SearchBar onSearch={setSearchValue} value={searchValue} />
      <ul className="users">
        {searchFilter.map((user) => {
          let classname =
            user.name.toLowerCase().indexOf(searchValue.toLowerCase()) === -1 &&
            "hide";

          return (
            <li className={`user ${classname}`} key={user.id}>
              {user.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default App;

SearchBar.js

import React from "react";

function SearchBar(props) {
  const handleSearch = (e) => {
    props.onSearch(e.target.value);
  };

  return <input type="text" onChange={handleSearch} value={props.value} />;
}

export default SearchBar;

App.scss

.user {
  list-style: none;
}

.hide {
  animation: fade-out 1s ease-out forwards;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    height: inherit;
    padding: inherit;
  }

  100% {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}

So basically i'm just trying to reverse the animation if the user delete a letter in the search bar.

Answer 1

You can just revers the animation definition, check this codesandbox :

CSS :

.show {
  animation: fade-in 1s ease-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    height: 0;
    padding: 0;
  }

  50% {
    opacity: 0;
    height: inherit;
    padding: inherit;
  }

  100% {
    opacity: 1;
  }
}

And inside the <App /> component: (check for hide/show classes) :

function App() {
  const [searchValue, setSearchValue] = useState("");
  const [searchFilter, setSearchFilter] = useState(users);

  return (
    <div className="App">
      <h2>Search</h2>
      <SearchBar onSearch={setSearchValue} value={searchValue} />
      <ul className="users">
        {searchFilter.map(user => {
          let classname =
            user.name.toLowerCase().indexOf(searchValue.toLowerCase()) === -1
              ? "hide"
              : "show"; // <--- HERE we switch for show/hide class.

          return (
            <li className={`user ${classname}`} key={user.id}>
              {user.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Answer 2

you can use a show class the same way you used the hide

in App.js

let classname = user.name.toLowerCase().indexOf(searchValue.toLowerCase()) === -1 ? "hide" : "show";

in App.scss

.show {
  animation: fade-in 1s ease-out forwards;
}

@keyframes fade-in {

  0% {
    opacity: 0;
    height: 0;
    padding: 0;
  }

  50% {
    opacity: 0;
    height: inherit;
    padding: inherit;
  }

  100% {
    opacity: 1;
  }
}

and you are good to go.