-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from ileostar/fix/beauitfy_style
review finish
- Loading branch information
Showing
10 changed files
with
149 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useEffect, useRef } from "react"; | ||
| /** | ||
| * 滚动动画 Hook | ||
| *1.使用时先在相应页面引入style下的scrollAnimate.css文件； | ||
| *2.然后定义const boxRef = useRef<HTMLDivElement>(null); | ||
| *3.在需要监听的元素上添加ref={boxRef}和className="box" | ||
| *4.最后调用钩子useScrollAnimate(boxRef)，传入需要监听的元素 | ||
| * @param boxRef 传入需要监听滚动的 HTML 元素的 React Ref | ||
| * @returns 无返回值 | ||
| */ | ||
| export function useScrollAnimate(boxRef:React.RefObject<HTMLElement>) { | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const box = boxRef.current; | ||
| if (box) { | ||
| const isBoxVisible = box.getBoundingClientRect().top+100 < window.innerHeight; | ||
| if (isBoxVisible && !box.classList.contains('isVisible')) { | ||
| box.classList.add('isVisible'); | ||
| } | ||
| if (!isBoxVisible && box.classList.contains('isVisible')) { | ||
| box.classList.remove('isVisible'); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', handleScroll); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('scroll', handleScroll); | ||
| }; | ||
| }, [boxRef]); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @keyframes fadeIn { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| .box { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out; | ||
| will-change: opacity, transform; | ||
| /* 初始状态模拟动画开始前的状态 */ | ||
| } | ||
|
|
||
| .isVisible { | ||
| animation: fadeIn 0.9s forwards; | ||
| /* 当添加is-visible类时，触发fadeIn动画 */ | ||
| } |
Oops, something went wrong.