animation 은 상태가 평가될때, 한번 실행된다.
버튼을 누를때마다, 실행되게 만들자.
재평가를 시키려면, useState 가 필요할 것이고,
트리거를 만드려면, useEffect 가 필요할것이다.
function LayoutHeader() {
const [showModal, setShowModal] = useState(false);
const cartCtx = useContext(CartContext);
...
let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`; // setBump 해야, bump 스타일 활성화
useEffect(() => {
setBtnBump(() => true); // 버튼의 bump 스타일이, 생기는 트리거
setTimeout(() => { // 시간 이 지나면(애니메이션 지속시간에 의거) bump 스타일은 지워지고
setBtnBump(false);
}, 300);
}, [cartCtx.totalPrice]); // 카트의 물품이 변하면, 이 함수를 반복한다.
return (
<Fragment>
<ul className={styles.header}>
...
<li className={btnStyle} onClick={toggleModal}>
누를때마다 bump 되는 애니메이션 완성
혹시 모를 광클을 대비하여,
아직 시간이 지나는 중이라면 setTimeout 을 리셋하는 클린업함수를 만들자.
function LayoutHeader() {
const [showModal, setShowModal] = useState(false);
const cartCtx = useContext(CartContext);
...
let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;
useEffect(() => {
setBtnBump(() => true);
const setTime = setTimeout(() => {
setBtnBump(false);
}, 300);
return () => {
clearTimeout(setTime); // 클리어함수 생성
};
}, [cartCtx.totalPrice]);
return (
<Fragment>
<ul className={styles.header}>
...
<li className={btnStyle} onClick={toggleModal}>
'CSS > 애니메이션' 카테고리의 다른 글
3. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기 (0) | 2022.12.23 |
---|---|
1. CSS animation 사용하기 with React (0) | 2022.12.12 |
댓글