Анимировать появление React - компонента при рендере

Question

есть вот такой логичный код 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

Answer 1

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [isShowBox, setIsShowBox] = useState(false);

  useEffect(() => {
    setTimeout(() => setIsShowBox(true));
  }, []);

  return (
    <div className="App">
      <div className={`block ${isShowBox ? "block-show" : ""}`} />
    </div>
  );
}

.block {
  width: 50px;
  height: 50px;
  background-color: black;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.block-show {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Анимировать появление React - компонента при рендере

Ответы (1 шт):