Redux形式のエラーアニメーション

Question

redux形式の入力フィールドの近くに表示されるエラーにアニメーションを追加する方法。

私はそれを行う方法が見つかりませんでした。

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

あなたは、単にその後、例えば、アニメーションのCSSトランジションを使用して、あなたのエラーメッセージのdivに

opacity: this.state.show ? 1 : 0

を追加することができます：メッセージのショーは、アニメーションを実行しますので、

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

いつでも