我试图让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>
如您所见,标签与所涉及的动画相对应。任何帮助将不胜感激,谢谢!