html代碼
<div ref={test} id="animatedElement" className="not-animated">
? ? ? ? <div style={{width:"100px",height:"50px",backgroundColor:"red"}}>
? ? ? ? </div>
</div>
JS代碼
const test = useRef(null)
? // 監聽滾輪事件
? useEffect(() => {
? ? const handleScrollaa = () => {
? ? ? const scrollTop1 = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? const h = test.current;
? ? ? const triggerPoint = window.innerHeight
? ? ? if (scrollTop1 > triggerPoint * 0.3) {
? ? ? ? // 觸發動畫，通過添加 animate 類
? ? ? ? console.log(32135456434687)
? ? ? ?(headerLogo2 as HTMLElement).style.animation = `ROW3 2s forwards`;
? ? ? }
? ? ? else if(scrollTop1 < triggerPoint * 0.3){
? ? ? ? h.style.animation=""
? ? ? ? h.style.opacity="0"
? ? ? }
? ? };
? ? window.addEventListener('scroll', handleScrollaa);
? ? // 組件卸載時移除事件監聽器
? ? return () => {
? ? ? window.removeEventListener('scroll', handleScrollaa);
? ? };
? }, []);
CSS代碼（實現從左到右滑動出來，并且由模糊到清楚的展現）
@keyframes ROW3 {
? 0% {
? ? transform: translateX(-100%); /* 動畫開始時，圖片在容器外部 */
? ? filter: blur(30px); ?/*模糊屬性*/
? ? opacity:0; /*opacity: 0 隱藏 ?1 顯示 */
? }
? 100% {
? ? transform: translateX(0)?rotate(1turn) ; /* 動畫結束時，圖片移動到容器內部?rotate(1turn)是內容旋轉，隨著移動而滾動?*/
? ? filter: blur(0);
? ? opacity:1;
? }}
