[React] 초간단 Fade In/Fade Out 이펙트 구현

버튼을 클릭하면 하위 내용이 서서히 나타나고, 버튼을 다시 클릭하면 하위 내용이 서서히 사라진다.

const btnStyle = {
  display: "inline-block",
  border: "1px solid black",
  padding: "3px",
  cursor: "pointer",
};

const box_active = {
  width: "300px",
  height: "200px",
  border: "1px solid black",
  position: "relative",
  background: "grey",
  opacity: "1",
  transition: "opacity 500ms",
};

const box_hidden = {
  width: "300px",
  height: "200px",
  border: "1px solid black",
  position: "absolute",
  background: "grey",
  opacity: "0",
  visibility: "hidden",
  transition: "opacity 500ms , visibility 500ms",
};

class FadeInOut extends React.Component {
  state = {
    select: false,
  };

  handleClick = () => {
    this.setState((state) => ({
      select: !state.select,
    }));
  };
  render() {
    return (
      <div>
        <div className="section1">
          <div onClick={this.handleClick} style={btnStyle}>
            버튼
          </div>
          <div style={this.state.select ? box_active : box_hidden}></div>
        </div>
        <div className="section2">다음 섹션 내용</div>
      </div>
    );
  }
}

export default FadeInOut;

 

state에 불린 변수를 둬서 버튼을 누르면 ture/false가 바뀌게한다.

내용 부분의 스타일은 삼항 연산자를 이용해 box_active와 box_hidden를 왔다갔다하게 한다.

display:none을 사용하면 사라지는 애니메이션을 적용할 수 없으므로, box_hidden에는 display:none 대신 opacity:0, visibility:hidden, position:absolute 속성을 준다. 이후 transition으로 효과 주면 된다.