Estoy trabajando para inyectar palabras de una matriz en un elemento usando setTimeout . También estoy usando Baffle.js para agregar una transición de ofuscación a dicho cambio de palabra.
El flujo debe ser algo como:
palabra 1 -> ofuscar sobre 3s -> palabra 2... y así sucesivamente.
Mi código está a continuación:
render() { return ( <div className='landing-page-wrapper'> <div className="main-text"> <span>AMIDST </span> <Baffle characters={'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}|;:,./<>?'} exclude={[' ']} speed={50} revealDuration={0} obfuscate={this.state.obfuscate}> {this.state.targetWord} </Baffle> </div> </div> ); } toggleObfuscate() { this.setState({ obfuscate: !this.state.obfuscate }) } injectWords() { const wordslist = [ 'creativity', 'emotion', 'logic', 'change', 'positivity', 'direction', 'thought', 'humanity' ] wordslist.forEach((words, index) => { setTimeout(() => { this.setState({targetWord: words}) }, (index+1) * 3000) }) }Me las arreglé para inyectar las palabras durante 3 segundos, sin embargo, parece que no puedo entender la parte de la ofuscación. ¿Me puede ayudar alguien?
Gracias por adelantado
Logré solucionar este problema agregando un setTimeout a la función toggleObfuscate() . Esto básicamente restablece el valor de estado para obfuscate
La solución se parece a esto:
toggleObfuscate() { this.setState({ obfuscate: !this.state.obfuscate }) setTimeout(() => { this.setState({obfuscate: false}) }, 1000) } injectWords() { const wordslist = [ 'creativity', 'emotion', 'logic', 'change', 'positivity', 'direction', 'thought', 'humanity' ] wordslist.forEach((words, index) => { setTimeout(() => { this.setState({targetWord: words}) this.toggleObfuscate(); }, (index+1) * 3000) }) }