因为袁老师视频的里面的只是使用vue实现了元素平滑上升一个效果。vue版本是可以通过Vue.directive()注册指令,然后可以在标签上面直接绑定v-slide-in就可以简单使用。
同时我想着是否react版本是否也是一样的操作,但是很失望,找不到react注册指令的一些教程。所以干脆用自己的方法写一个。
原理:实际上就是操作demo,我们可以通过ref获得当前节点然后传递过去给这个方法进行一个调用
首先创建一个vSlideIn.js文件(和视频代码一样)
//动画运动距离
const DISTANCE = 300;
//动画时间
const DURATION = 1000;
//动画对象
const animationMap = new WeakMap()
//监听重叠
const ob = new IntersectionObserver(entries=>{
for(const entry of entries){
if(entry.isIntersecting){
console.log(entry.target)
const animation = animationMap.get(entry.target)
//播放
animation.play();
//取消监听
ob.unobserve(entry.target)
}
}
})
function isBelowViewport(el){
const rect = el.getBoundingClientRect()
return rect.top > window.innerHeight
}
export default {
mounted(el) {
if(!isBelowViewport(el)){
return
}
const animation = el.animate([
{
transform:`translateY(${DISTANCE}px)`,
opacity:0.5
},
{
transform:`translateY(0)`,
opacity:1
}
],{
duration:DURATION,
easing:'ease'
});
animation.pause()
animationMap.set(el,animation)
ob.observe(el)
},
//卸载
unmounted(el:any) {
ob.unobserve(el)
},
};
我的jsx代码
import { useEffect, useRef, useState } from "react";
//css自己加
import styled from "./HomePage.module.scss";
//注意自己的文件路径
import vslidein from "@/utils/vSlideIn";
const vslideins = vslidein.mounted;
//主文件
function HomePage() {
const refs1 = useRef(null);
const refs2 = useRef(null);
const refs3 = useRef(null);
const refs4 = useRef(null);
useEffect(() => {
//异步一下
setTimeout(() => {
//直接传refs1没用的会报错误,refs1.current才能拿到真正的demo
//这块和定义都可以用循环实现,没必要写这么多代码,你们自己改良即可
vslideins(refs1.current);
vslideins(refs2.current);
vslideins(refs3.current);
vslideins(refs4.current);
});
}, [refs1,refs2,refs3,refs4]);
return (
<>
<div className={styled.subject}>
<div ref={refs1} className={styled.colorA}>
1
</div>
<div ref={refs2} className={styled.colorB}>
2
</div>
<div ref={refs3} className={styled.colorC}>
3
</div>
<div ref={refs4} className={styled.colorD}>
4
</div>
</div>
</>
);
}
export default HomePage;
算了我直接把饭喂你嘴里面,css
.subject {
div{
width: 100vw;
height: 100vh;
}
.colorA{
background:#1c1e53;
}
.colorB{
background:#fcd980;
}
.colorC{
background:#f4f6fc;
}
.colorD{
background:#fde6b2;
}
}
总结:简单的实现一下,你们可以自己优化修改一下。实际上就是操作demo,把demo传进去即可