我如何让anime.js仅发生一次,而不是在React中的每次重新渲染上发生?

时间:2020-05-17 18:56:50

标签: reactjs anime.js

我试图让anime.js在用户第一次加载页面时仅在标头上工作一次。我在页面上有一个搜索栏,每当我在搜索栏中键入新字符时,它就会重新渲染整个页面。这也会导致动画重新渲染。

以下是render函数内部的代码段:

render() {
    if (this.state.screenType === 'init') {
      return (
        <div className="container">
          <div className="header-and-search-init">
            <div className="header-init">
              <Anime
              duration={2000}
              translateY={[100,0]}
              >
              <h1 className="header-anim"><a href=".">Graph Series</a></h1>
              </Anime>

            </div>
            <div className="search-container-init">
              <input
                onKeyPress={this.onKeyPress}
                className="searchbar-init"
                type="text"
                value={this.state.value}
                onChange={this.handleChange}
                placeholder="search for a TV series"
              ></input>

如您所见,标签与所涉及的动画相对应。任何帮助将不胜感激,谢谢!

0 个答案:

没有答案