React 동 효 탄창 구성 요소 실현

UI 구성 요 소 를 작성 할 때 동 효 를 고려 하지 않 으 면 쉽게 이 루어 집 니 다.주로 유 무 전환(Vue 의 v-if 속성 과 유사)이나 가시 적 전환(Vue 의 v-show 속성 과 유사)입 니 다.

1.효과 없 는 팝 업 창
React 에서 이렇게 실현 할 수 있 습 니 다.

interface ModalProps {
  open: boolean;
  onClose?: () => void;
  children?: any;
}
const Modal = ({open. onClose, children}: ModalProps) => {
  if (!open) {
    return null;
  }
  return createPortal(<div>
    <div classname="modal-content">{children}</div>
    <div classname="modal-close-btn" onclick="{onClose}">x</div>
  </div>, document.body);
};

사용 방법:

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

우 리 는 여기 서 open 속성 을 사용 하여 전 시 를 제어 하 는 것 입 니까?아니면 전시 하지 않 는 것 입 니까?그러나 그 라 데 이 션 효 과 는 전혀 없습니다.
만약 에 우리 가 fade,zoom 등 애니메이션 효 과 를 실현 하려 면 이 를 개조 해 야 한다.

2.효과 가 있 는 탄창 을 직접 만 들 기
많은 학우 들 이 자신 이 효 과 를 실현 할 때 항상 전시 할 때 효과 가 있 고 닫 을 때 효과 가 없다.다 효과 적 인 타 이 밍 이 야.여기 서 우 리 는 먼저 스스로 효과 적 인 유통 을 실현 한다.
처음에 제 가 실 현 했 을 때 동 효 는 시작 상태 와 끝 상태 만 있 었 고 많은 변수 와 논리 로 이 동 효 를 제어 해 야 했 습 니 다.
나중에 나 는 react-transition-group 구성 요소 의 실현 을 참고 했다.그 는 동 효 를 몇 부분 으로 나 누 어 각 부분 을 각각 제어 했다.

효과 전개 순서:enter->enter-active->enter-done;

동 효 를 닫 는 순서:exit->exit-active->exit-done;

동 효 과정 은 enter-active 과 exit-active 의 과정 에서
저 희 는 하나의 변수 active 를 통 해 작 동 효 과 를 닫 았 는 지 여 부 를 제어 합 니 다.매개 변수 open 은 작 동 효 과 를 실행 하 는 지,작 동 효 과 를 닫 는 지 만 제어 합 니 다.
open 과 active 가 모두 false 일 때 만 탄창 을 소각 합 니 다.

const Modal = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); //        

  if (!open && !active) {
    return null;
  }

  return ReactDOM.createPortal(
    <div classname="modal">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

여기 서 우 리 는 이어서 동 효 과정의 변 화 를 추가 합 니 다.

const [aniClassName, setAniClassName] = useState(''); //    class

// transition         
const onTransitionEnd = () => {
  //  open rue ，      'enter-done'
  //  open false ，      'exit-done'
  setAniClassName(open ? 'enter-done' : 'exit-done');

  //  open false，      ，         
  if (!open) {
    setActive(false);
  }
};

useEffect(() => {
  if (open) {
    setActive(true);
    setAniClassName('enter');
    // setTimeout    class， transition   
    setTimeout(() => {
      setAniClassName('enter-active');
    });
  } else {
    setAniClassName('exit');
    setTimeout(() => {
      setAniClassName('exit-active');
    });
  }
}, [open]);

Modal 구성 요소 의 전체 코드 는 다음 과 같 습 니 다.

const Modal = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); //        
  const [aniClassName, setAniClassName] = useState(''); //    class
  const onTransitionEnd = () => {
    setAniClassName(open ? 'enter-done' : 'exit-done');
    if (!open) {
      setActive(false);
    }
  };

  useEffect(() => {
    if (open) {
      setActive(true);
      setAniClassName('enter');
      setTimeout(() => {
        setAniClassName('enter-active');
      });
    } else {
      setAniClassName('exit');
      setTimeout(() => {
        setAniClassName('exit-active');
      });
    }
  }, [open]);

  if (!open && !active) {
    return null;
  }

  return ReactDOM.createPortal(
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

동 효 의 유통 과정 이 이미 실현 되 었 으 니 양식 도 함께 써 야 한다.예 를 들 어 우 리 는 점차적으로 나타 나 는 fade 효 과 를 실현 해 야 한다.

.enter {
  opacity: 0;
}
.enter-active {
  transition: opacity 200ms ease-in-out;
  opacity: 1;
}
.enter-done {
  opacity: 1;
}
.exit {
  opacity: 1;
}
.exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.exit-done {
  opacity: 0;
}

확대 축소 줌 효 과 를 실현 하려 면 이 클 라 스 를 수정 하면 됩 니 다.
효과 가 있 는 탄창 이 이미 실현 되 었 다.
사용 방법:

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

링크 를 클릭 하여 스스로 작 동 효 과 를 실현 하 는 React 윈도우 데모 효 과 를 봅 니 다.
유사 하 게 Toast 같은 것 도 이렇게 이 루어 질 수 있다.

3. react-transition-group
우 리 는 동 효 를 실현 하 는 사고 에서 react-transition-group 중의 CSSTransition 구성 요 소 를 참고 했다.CSSTransition 은 작 동 효과 전개 와 닫 는 과정 을 봉 해 주 었 습 니 다.우 리 는 팝 업 창 을 실현 할 때 이 구성 요 소 를 직접 사용 할 수 있 습 니 다.
여기 서 중요 한 속성 이 있 습 니 다.unmountOnExit 은 동 효 가 끝 난 후에 이 구성 요 소 를 마 운 트 해제 하 는 것 을 의미 합 니 다.

const Modal = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // in   true/false，true     ，false     
  return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div classname="modal">
        <div classname="modal-content">{children}</div>
        <div classname="modal-close-btn" onclick="{onClose}">
          x
        </div>
      </div>
    </csstransition>,
    document.body,
  );
};

CSSTRansition 구성 요 소 를 사용 한 후에 Modal 의 동 효 는 훨씬 편리 해 졌 다.

4.총화
이로써 효 과 를 기다 리 는 React Modal 구성 요 소 를 실현 하 였 습 니 다.React 에는 Vue 가 공식 적 으로 정의 한 <transition> 태그 가 없 지만 저 희 는 스스로 또는 제3자 구성 요 소 를 통 해 이 루어 질 수 있 습 니 다.
이상 은 React 가 동 효 를 실현 하 는 팝 업 창 구성 요소 에 대한 상세 한 내용 입 니 다.React 팝 업 창 구성 요소 에 대한 자 료 는 다른 관련 글 을 주목 하 십시오!