1. CSS 전환과 애니메이션의 한계

CSS 전환과 애니메이션

1) CSS 전환 (tansition)
    : "class 의 변경에 의해" 스타일이 변화할때, 변환되는 시간을 조절해서, 애니메이션 "처럼" 보이게 만드는 방법

	tansition : all 300ms ease-out 처럼 사용하는 그것

2) 애니메이션 ( animation )
    : 컴포넌트가 동작할때, 애니메이션을 주는 진짜 애니메이션

CSS 전환의 한계

: 컴포넌트가, css 에 의해 변경될 때 만 가능하다.

  조건에 만족하면, DOM에서 생성되거나 사라지는,   Modal 과 컴포넌트 들에서는 사용 자체가 불가능하다.

 

 

CSS 애니메이션의 사용

1) animation 옵션을 사용하여, [애니메이션 이름], [시간], [타이밍] 을 정한다.
2) @keyframes 을 사용하여, [애니메이션 이름을 타겟하여 % 별로 동작방법을 정한다.]

<컴포넌트> ==============================================

    [App.js]
        <div>
            {modalOn && <ModalM onToggleModal={onToggleModal} />}
            <button onClick={onToggleModal}> 모달 온</button>
        </div>

    [Modal.js]
        import styles from "./modal-mine.module.css";

        const ModalM = (props) => {
        const { onToggleModal } = props;

            return (
                <div>
                    <div className={styles.backDrop}></div>
                    <div className={styles.content}>
                        <h1> 모달 내거</h1>
                        <p> 이것은 모달 </p>
                        <button onClick={onToggleModal}> 종료하기</button>
                    </div>
                </div>
            );
        };

        export default ModalM;



<CSS> ==============================================

            ...

    .contnet{
            ...

        animation: openModal 500ms ease-in-out;     // [애니메이션 이름], [시간], [타이밍] 을 정한다.
    }

    @keyframes openModal {      // [ 정한 애니메이션 이름을 타겟 ]
        0% {                    // [ % 의 순서대로, 무슨 일이 일어날지 스타일을 정한다.]
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }      
        100% {
            opacity: 1;
        }}

 

 

CSS 애니메이션의 한계

생성되고 보여주는 것은 좋다. 잘된다.

문제는 "사라질때는 State 에 의해 즉각적으로 사라진다." css 스타일이고 뭐고 
"컴포넌트가 없는데" 어디다가 animation 을 적용시킨단 말인가?

"생성,제거" 의 모든 곳에 부드러운 움직임을 위해서는 "타사패키지가 필요하다."

=> React Transition Group 의 사용

 

React Transition Group 을 사용하여 애니메이션을 만들어보자