>source

상태에 따라 주어진 div가 오른쪽에서 다른 div와 겹치는 것처럼 보이도록 만들고 싶습니다. 제 code는 다음과 같습니다.

const [loggedIn, setLoggedIn]= useState<boolean>(false);
  const [hasConfirmedAccount, setHasConfirmedAccount]= useState<boolean>(false);
  return (
    <>      <div style={{ width: "100%" }}>        <div style={{ float: "left", width: "50%" }}>          <div
            style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
          ></div>        </div>        <div id='notLoggedIn' style={{ float: "right", width: "50%" }}>          {!loggedIn &amp;
&amp;
 (
            <div>                WHEN LOGGED IN=== TRUE
            </div>          )}
          <div
            style={
              loggedIn &amp;
&amp;
 !hasConfirmedAccount
                ? { width: "100%", transition: "ease-in-out 5s" }
                : { display: "none" }
            }
          >            <div id="notConfirmedAccount">WHENE LOGGED IN=== TRUE AND hasConfirmedAccount=== FALSE</div>          </div>        </div>      </div>    </>  );

code는 잘 작동합니다.로그인=== 참그리고hasConfirmedAccount=== 거짓div아이디= 확인되지 않은 계정와 함께 div 대신 표시되었습니다.아이디=로그인하지 않음, 그러나 이 div를 표시하는 것은 흐르지 않습니다. 나는 이전 div와 겹치는 오른쪽에 있는 div의 느린 떠나는 효과를 원합니다.

이 작업을 수행하는 방법을 알려주실 수 있습니까?

도움을 주셔서 감사합니다!

  • 답변 # 1
    1. animate.css 설치=> $ npm install animate.css --save 애니메이트.css

    2. "./animate.css" 가져오기

    3.이 패턴과 같이 className에 aniamte의 이름을 입력하십시오.

    <div className={style.forgot} className='animate__animated animate__fadeInDown'>

  • 답변 # 2

    React 애니메이션 애드온 사용반응전환그룹그리고ReactCSSTransitionGroup

    ReactTransitionGroup 애드온 컴포넌트는 애니메이션을 위한 저수준 API이고, ReactCSSTransitionGroup은 기본적인 CSS 애니메이션과 트랜지션을 쉽게 구현하기 위한 애드온 컴포넌트입니다.

    https://reactjs.org/docs/animation.html

  • 이전 Android 스튜디오는 maven-publish 플러그인을 사용하여 mavenLocal에 라이브러리를 게시할 수 없습니다.
  • 다음 RAM 및 CPU 시간 소비를 얻는 방법은 무엇입니까? Linux의 Python 앱