Framer motion : AnimatePresence에 대해서

AnimatePresence는 Framer Motion에서 제공하는 컴포넌트로 조건부로 렌더링되는 애니메이션을 처리할 때 유용하다. AnimatePresence를 사용하면 요소가 DOM에서 제거될 때(exit props에 애니메이션 전달) 애니메이션을 적용할 수 있다. 

• <AnimatePresence mode={"wait | sync"}>
    <motion태그
    key={item아이디}
    intial={{초반 애니메이션}}
    animate={{애니메이션}}
    exit={{제거될 때 애니메이션}}/>
  </AnimatePresence>
  wait는 현재 애니메이션이 끝난 후 다음 애니메이션이 시작되고, async의 경우 모든 애니메이션이 동시에 시행된다. 

 

AnimatePresence 사용하기

1. motion 태그를 설정한다. 

const SlideShow = ({ image }) => (
        <motion.img
            src={image.src}
            initial={{ x: 300, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.5 }}/>
)

const images = [
    { src: "https://via.placeholder.com/300x200?text=image+1" },
    { src: "https://via.placeholder.com/300x200?text=image+2" },
    { src: "https://via.placeholder.com/300x200?text=image+3" }
]

 

2. <AnimatePresence> 컴포넌트로 감싸고, DOM에서 제거될 때 애니메이션을 설정한다. 

AnimatePresence로 감싸는 애니메이션 요소들은 요소를 식별하기 위해서 각각 고유한 key 값을 가져야 한다. 또한 exit 애니메이션을 통해서 요소가 사라질 때 부드러운 애니메이션 효과를 추가할 수 있다. 또한 AnimatePresence의 mode를 통해서 애니메이션이 어떻게 처리 되는지 설정할 수 있다.

const SlideShow = ({ image }) => (
    <AnimatePresence mode={"wait"}>
        <motion.img
            src={image.src}
            key={image.src}
            initial={{ x: 300, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.5 }}
            exit={{x:-300, opacity: 0}}/>
    </AnimatePresence>
)

 

<<전체 코드>>

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

const SlideShow = ({ image }) => (
    <AnimatePresence mode={"wait"}>
        <motion.img
            src={image.src}
            key={image.src}
            initial={{ x: 300, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.5 }}
            exit={{x:-300, opacity: 0}}/>
    </AnimatePresence>
)

const images = [
    { src: "https://via.placeholder.com/300x200?text=image+1" },
    { src: "https://via.placeholder.com/300x200?text=image+2" },
    { src: "https://via.placeholder.com/300x200?text=image+3" }
]

export default function Comp12() {
    const [index, setIndex] = useState(0);
    const nextImage = () => {
        setIndex(prevIndex => (prevIndex + 1) % images.length);
    }

    return (
        <div>
            <div>
                <SlideShow image={images[index]} />
            </div>
            <div>
                <button onClick={nextImage}>NextImage</button>
            </div>
        </div>
    )
}

 

만약 AnimatePresence가 적용되지 않으면 아래와 같이 애니메이션이 시행된다.