Анимировать список поиска при вводе текста на панели поиска (React)

Question

Что я пытаюсь сделать: когда в строке поиска вводится символ, раздел автоматически обновляется после 0,8 c бездействия (без ввода текста) с результатами, соответствующими исследованию. Результаты отображаются с эффектом скольжения вверх. Фильтры, не соответствующие исследованию, исчезают с эффектом постепенного исчезновения.

Приложение. js

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 }) => {
    return name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
  };

  return (
    <div className="App">
      <h2>Search</h2>
      <SearchBar onSearch={setSearchValue} value={searchValue} />
      <ul>
        {users.filter(filterNames).map((user) => (
          <li className="user" key={user.id}>
            {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

SearchBar

import React from "react";

function SearchBar(props) {
  return (
    <input
      type="text"
      onChange={(e) => props.onSearch(e.target.value)}
      value={props.value}
    />
  );
}

export default SearchBar;

App.s css

.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;
  }
}

эффект исчезновения

animation: fade-out 1s ease-out both;
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Я попытался добавить слайд в анимации к 'li' с пользователем className, но анимация работает только при первом рендеринге, а не когда Я набираю в строке поиска.

Answer 1

Основная проблема с потоком кода заключается в том, что вы удаляете элементы,

как кто-то может применить css к удаленному элементу ,

вам нужен этот элемент, чтобы сначала дать анимацию,

Итак, вот что вы можете сделать

// remove this

//   const filterNames = ({ name }) => {
//     return name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
//   };

return (
    <div className="App">
      <h2>Search</h2>
      <SearchBar onSearch={setSearchValue} value={searchValue} />
      <ul>
        {users.map((user) => {
          // we can use it as like
          let classname = user.name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1 ? 'user' : 'user removed';
          return <li className={classname} key={user.id}>
            {user.name}
          </li>
        })}
      </ul>
    </div>
);

И добавить css для несоответствующего пользователя, чтобы дать эффект удаления .

РАБОЧАЯ ДЕМО