在搜索栏上输入时动画化搜索列表(React)

Question

我要做的是:当一个字符在搜索栏中被写入时，在0，8秒的不作为(没有输入)之后，该部分会自动更新，并得到与研究结果相对应的结果。结果以幻灯片的效果出现在顶部。与研究不匹配的滤光片以淡出效果消失。

App.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.scss

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

我尝试将幻灯片添加到className用户的“li”中，但是动画只在第一个呈现中工作，而不是当我在搜索栏上输入时才能工作。

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，以获得删除效果。

工作演示