技術棧:NextJS，TypeScript，CSS

我正在我的個人作品集網站上工作，在那里我決定制作描述不同技能的卡片。我想出了一個很酷的主意來制作它們的動畫。如下圖所示，我希望這些箭頭的功能就像用戶點擊左箭頭時，左邊的卡片消失，右邊的卡片移到左邊，右邊的新卡片出現。

讓我們假設我正在從一個API中獲取卡片的詳細信息，這個API是我創建的，或者是靜態存儲在一個數組中的。

我想到了一個在數組中使用雙指針的方法，我可以根據點擊的箭頭增加/減少指針。

我只是好奇我怎樣才能實現流暢的動畫/過渡來做到這一點。

容器. tsx

export default function Container() {
    return (
        <div className={styles.card_container}>
            <a href="#"><Image className={styles.arrows} src="/imgs/arrow-left.png" alt="This is just a left arrow" width={40} height={40} /></a>
            {
                cards.map((card: Card) => (
                    <CardContainer key={`${card.title}-${card.emoji}`}
                        backgroundColor={card.backgroundColor}
                        title={card.title}
                        emoji={card.emoji}
                        text={card.text}
                    />
                ))
            }
            <a href="#" ><Image className={styles.arrows} src="/imgs/arrow-right.png" alt="This is just a right arrow" width={40} height={40} /></a>
        </div>
    );
}

function CardContainer({ backgroundColor, title, emoji, text}: {backgroundColor: string, title: string, emoji: string, text: string}) {
    return(
        <div className={styles.card} style={{ backgroundColor }}>
            <h2 className={styles.card_title}>{title} {emoji}</h2>
            <p className={styles.card_text}>{text}</p>
        </div>
    )
}

我仍在思考如何才能實現如此平穩的過渡。我想出了雙指針的邏輯。