есть вот такой логичный код React:
function Label(props){
if(!props.isRedN){
return <label className='field-lable'>Nothing</label>
}else{
return <lable style={{ color: 'rgba(52, 52, 52, 0.73)'}} className='field-lable'>It Work!</lable>
}
}
class someClass extend React.Component{
constructor(props){
super(props);
this.state = {
isRedN: false,
nameInput: ''
}
handleChangesName(e){
this.setState({nameInput: e.target.value});
}
isRedFalseN(){ this.setState({isRedN: false}) }
useClickOnButton(){
if(this.state.nameInput === ''){
this.setState({isRedN: true,});
}
}
render(){
return(
<input type='text' onClick={this.isRedFalseN} value={this.state.nameInput} onChange={this.handleChangesName} required></input>
<Label isRedN={this.state.isRedN} />
<button className='starandbutton-button' onClick={this.useClickOnButton}>Send</button>
)}
}
и вот такой CSS код:
.form-form input:focus{
outline: none;
}
.form-form input:focus ~ label,
.form-form input:valid ~ label{
transform: translateY(-35px);
font-size: 12px;
color: #A8A8A8;
}
.field-lable{
position: absolute;
padding-bottom: 10px;
padding-right: 4px;
font-family: 'Prata';
font-style: normal;
font-weight: 400;
font-size: 20px;
/* identical to box height */
text-align: right;
pointer-events: none;
color: #343434;
transition: all 0.3s ease;
}
Проблема: всё работает прекрасно(как не странно), но проблема заключается в анимации, а именно в том, что когда React перерендывает компонент <Label />
при, например, default значении isRedN={false}
, а потом перерендер при значении true
, а потом наоборот, это происходит грубо и резко(без анимации), хотя в CSS как можно увидеть есть строка про transition, так вот вопрос: есть какие то способы отрендерить React компонент плавно и с значениями как для CSS transition: all 0.3s ease