Redux-form 和错误动画

【问题标题】：Redux-form and error animationRedux-form 和错误动画
【发布时间】：2017-10-17 01:19:46
【问题描述】：

如何为错误添加动画，这些错误出现在 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>
    );
};

【问题讨论】：

标签： reactjs redux redux-form

【解决方案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)',

所以任何时候消息显示都会运行动画

【讨论】：