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)', 

因此，任何时候，当消息显示将要运行的动画