मैं क्या करने की कोशिश कर रहा हूं: जब खोज बार में कुछ टाइप किया जाता है, तो जिन उपयोगकर्ता नामों की खोज नहीं की जाती है, वे गायब हो जाते हैं और गायब हो जाते हैं (जो ठीक काम करता है), और जब अक्षर हटा दिए जाते हैं तो मैं इस एनीमेशन को उलटने की कोशिश कर रहा हूं सर्च बार या सर्च बार में क्लियर हो जाता है।

ऐप.जेएस

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;

ऐप.एससीएसएस

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

तो मूल रूप से मैं एनीमेशन को उलटने की कोशिश कर रहा हूं यदि उपयोगकर्ता खोज बार में एक अक्षर हटा देता है।

1
Yassine Ab 12 मई 2020, 17:04

2 जवाब

सबसे बढ़िया उत्तर

आप बस ऐनिमेशन की परिभाषा को उलट सकते हैं, इसे देखें कोडसैंडबॉक्स:

सीएसएस:

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

और <App /> घटक के अंदर: (छुपाएं/शो कक्षाओं की जांच करें):

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>
  );
}
1
ROOT 12 मई 2020, 17:28
क्या होगा यदि मैं पहली बार घटक लोड होने पर एनीमेशन काम नहीं करना चाहता, तो क्या एनीमेशन-दिशा: वैकल्पिक के साथ ऐसा करने का कोई तरीका है? केवल फ़ेड-आउट कीफ़्रेम के साथ।
 – 
Yassine Ab
13 मई 2020, 13:21
1
दोनों प्रभावों को करने के लिए एक एनीमेशन का उपयोग करना असंभव है, मैं लोड पर एनीमेशन को हटाने पर ध्यान दूंगा।
 – 
ROOT
13 मई 2020, 13:23
1
@YassineAb, मैंने अपना sandbox अपडेट किया और नोट करें कि मैंने यह सुनिश्चित करने के लिए componentDidUpdate() की नकल करने के लिए एक विधि जोड़ी है कि मैं प्रारंभिक रेंडर के बाद सिर्फ शो क्लास जोड़ूं।
 – 
ROOT
13 मई 2020, 14:56
मदद करने में खुशी! कृपया मेरे उत्तर को स्वीकार करने पर विचार करें यदि आप इसे अपने प्रश्न के लिए उपयोगी पाते हैं।
 – 
ROOT
13 मई 2020, 15:22

आप एक show वर्ग का उपयोग उसी तरह कर सकते हैं जैसे आपने hide का उपयोग किया था

App.js . में

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

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

और तुम जाने के लिए अच्छे हो।

1
Marik Ishtar 12 मई 2020, 17:31
क्या होगा यदि मैं पहली बार घटक लोड होने पर एनीमेशन काम नहीं करना चाहता, तो क्या एनीमेशन-दिशा: वैकल्पिक के साथ ऐसा करने का कोई तरीका है? केवल फ़ेड-आउट कीफ़्रेम के साथ।
 – 
Yassine Ab
13 मई 2020, 13:21