简言
Vue.js是一个轻量级的JavaScript框架，广泛用于构建用户界面。它提供了一套丰富的指令，帮助开发者快速构建交互式的Web应用程序。本文将介绍个人使用的滑动指令，并解释它们的用法和功能。大家可以根据具体的需求，并结合其他Vue特性和功能来实现更复杂的交互效果。某音的教学视频代码修改版
Vue指令的优点
- 简洁明了：Vue指令以v-开头，后跟指令名称，如v-bind、v-on等，语法简洁，易于理解和使用。
- 方便快捷：Vue指令可以快速创建和管理DOM元素，并且可以方便地绑定事件处理函数，大大减少了手动编写HTML和JavaScript代码的工作量。
- 响应式：Vue指令具有响应性，当数据发生变化时，指令会自动更新相关的DOM元素，无需手动更新页面。
- 可组合性：Vue指令可以组合使用，实现更复杂的功能。例如，可以使用v-bind指令绑定一个CSS样式对象，实现动态的样式修改。
- 自定义性：Vue指令可以自定义指令选项，通过定义指令的参数、更新、钩子等函数，实现自定义指令功能，满足项目对Vue指令的特殊需求。
代码解析三步走
- 看注释
- 看注释
- 看注释
const distance = 100;
const duration = 800;
// 创建一个 WeakMap 实例
const animationMap = new WeakMap();
// 判断元素是否在视口之下
function isBelowViewport(el) {
const rect = el.getBoundingClientRect();
return rect.top > window.innerHeight;
}
// 创建一个观察者实例
const ob = new IntersectionObserver((entries) => {
for (const entry of entries) {
// 判断元素是否在视口之下
if (entry.isIntersecting) {
// 获取元素对应的动画实例并播放
const animation = animationMap.get(entry.target);
animation.play();
ob.unobserve(entry.target);
}
}
});
export default {
// 1. 通过指令钩子函数的参数 el 获取到 DOM 元素
mounted(el) {
// 2. 判断元素是否在视口之下，如果不是则不执行动画
if (!isBelowViewport(el)) {
// 直接执行动画
el.animate(
[
{
transform: `translateY(${distance}px)`,
opacity: 0,
},
{
transform: `translateY(0)`,
opacity: 1,
},
],
{
duration: duration,
easing: "ease",
}
);
return;
}
// 3. 创建动画实例并暂停
var animation = el.animate(
[
{
transform: `translateY(${distance}px)`,
opacity: 0,
},
{
transform: `translateY(0)`,
opacity: 1,
},
],
{
duration: duration,
easing: "ease",
}
);
// 4. 将动画实例存储到 WeakMap 中
animation.pause();
// 5. 将元素和动画实例关联起来
animationMap.set(el, animation);
// 6. 元素进入视口时播放动画
ob.observe(el);
},
// 7. 元素移除时取消监听
unmounted(el) {
ob.unobserve(el);
},
};
效果展示
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
