Redux形式和錯誤動畫

Question

如何將動畫添加到以redux-form形式出現在輸入字段附近的錯誤。

我還沒有找到任何方法來做到這一點。

export default ({input, label, meta}) => { 
    return (
     <div> 
      <label>{label}</label> 
      <input {...input} style={{marginBottom: '5px'}}/> 
      <div className="red-text" style={{marginBottom: '20px'}}> 
       { meta.touched && meta.error } 
      </div> 
     </div> 
    ); 
}; 

Answer 1

您可以簡單地添加

opacity: this.state.show ? 1 : 0

到您的錯誤信息DIV，然後使用CSS動畫過渡，例如：

MsTransition: 'all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)', 
WebkitTransition: 'all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)', 
transition: 'all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)', 

因此，任何時候，當消息顯示將要運行的動畫