# 效果 ![2024-08-11 13.58.04.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/950c3d6ba7704956b6cb03a29ea4429c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQmx1ZeWVig==:q75.awebp?rk3s=f64ab15b&x-expires=1768679947&x-signature=3LWgf74oyphy4Z3oedxUPPBNgHg%3D) # 实现方式 1. 自定义指令 2. 封装组件 **两种方式均可以在SSR页面中使用** ## 方式1:自定义指令实现 ```JS import Vue from 'vue'; const DISTANCE = 100; // y轴移动距离 const DURATION = 1000; // 动画持续时间 const THRESHOLD_FOR_TRIGGERING_ANIMATION = 0.1; // 当元素一部分可见时触发动画 const animationMap = new WeakMap(); function handleIntersection(entries, observer) { // IntersectionObserver 回调函数, 处理元素的可见性变化 for (const entry of entries) { // 遍历所有观察目标 if (entry.isIntersecting) { // 如果目标可见 const animation = animationMap.get(entry.target); // 获取动画对象 if (animation) { animation.play(); // 播放动画 } else { // 如果不支持 Web Animations API，则使用 CSS 动画回退方案 entry.target.classList.add('active'); } observer.unobserve(entry.target); // 播放一次后停止监听 } } } let ob; if ('IntersectionObserver' in window) { // 如果浏览器支持 IntersectionObserver ob = new IntersectionObserver(handleIntersection, { // 创建 IntersectionObserver 对象 threshold: THRESHOLD_FOR_TRIGGERING_ANIMATION // 当元素一部分可见时触发动画 }); } else { // 回退机制：如果不支持 IntersectionObserver ob = { observe(el) { // IntersectionObserver 接口的 observe 方法 el.__onScroll__ = () => { // 监听元素的滚动事件 if (isInViewport(el)) { // 如果元素在视窗内 const animation = animationMap.get(el); // 获取动画对象 if (animation) { animation.play(); } else { // 如果不支持 Web Animations API，则使用 CSS 动画回退方案 el.classList.add('active'); } window.removeEventListener('scroll', el.__onScroll__); // 停止监听 } }; window.addEventListener('scroll', el.__onScroll__); // 监听元素的滚动事件 }, unobserve(el) { // IntersectionObserver 接口的 unobserve 方法 if (el.__onScroll__) { // 如果元素有滚动事件监听 window.removeEventListener('scroll', el.__onScroll__); // 停止监听 delete el.__onScroll__; // 清理引用 } } }; } function isBelowViewport(el) { // 判断元素是否在视窗下方 const rect = el.getBoundingClientRect(); return rect.top > window.innerHeight; } function isInViewport(el) { // 判断元素是否在视窗内 const rect = el.getBoundingClientRect(); return rect.top < window.innerHeight && rect.bottom > 0; } const directive = { name: 'slide-in', inserted(el, binding) { // 元素插入到 DOM 时触发 if (!isBelowViewport(el)) { // 如果元素在视窗下方，则不执行动画 console.log('Element is not below viewport'); return; } const duration = binding.value && binding.value.duration ? binding.value.duration : DURATION; // 动画持续时间 const animationOptions = { // 动画选项: 目标位置、持续时间、缓动函数 duration: duration, easing: binding.value && binding.value.easing ? binding.value.easing : 'ease' }; // 检查是否支持 Web Animations API let animation; if (el.animate) { // 如果支持 Web Animations API animation = el.animate([ // 创建动画对象 { transform: `translateY(${DISTANCE}px)`, opacity: 0.5 }, { transform: 'translateY(0)', opacity: 1 } ], animationOptions); animation.pause(); // 初始化时暂停动画 animationMap.set(el, animation); // 保存动画对象 } else { // 如果不支持 Web Animations API，则添加 CSS 动画回退类 el.classList.add('animate-fallback'); // animate-fallback在下面SCSS中有定义 } ob.observe(el); // 开始监听元素的可见性变化 }, unbind(el) { // 元素从 DOM 中移除时触发 ob.unobserve(el); // 停止监听元素的可见性变化 } }; Vue.directive(directive.name, directive); ``` **注册指令** ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5967cf65979f45eeb509d2d906eb5a07~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQmx1ZeWVig==:q75.awebp?rk3s=f64ab15b&x-expires=1768679947&x-signature=PaChD6K8a8dTshreSepAtvwuyv4%3D) `directives/index.js` ```js import './slide-in' // 元素缓慢上升效果 ``` `main.js` ```js import './directives' ``` **在页面中使用** ```vue2 ``` ```SCSS ``` ## 方式2: 封装为组件 ```vue2 ``` **页面使用** ```html

{{ s.text }} - slide-comp

```