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;
}}