前端实用技巧--学习笔记

1、css逐帧动画steps()

案例：时钟的秒针动画

.box{
  // animation: rotate 60s linear infinite; // 指针会匀速转动
  animation: rotate 60s steps(60) infinite; // steps(60)会把动画平均分成60步，每次移动一步，实现一秒走一格
}
@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

2、css动画的暂停和恢复

案例：一个旋转动画，鼠标移入动画暂停，移出动画继续

.box{
  // animation: rotate 60s linear infinite; // 指针会匀速转动
  animation: rotate 60s steps(60) infinite; // steps(60)会把动画平均分成60步，每次移动一步，实现一秒走一格
}
.box:hover{
  animation-play-state: paused // running-动画运行 paused-动画暂停
}
@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

3、css粘性定位

案例：账单，月统计吸附在页面顶部

.box{
  position: sticky // 粘性定位以有overflow属性的父元素为参考，逐层像上查询，如果没有则为最外层盒子
  top: 0
}

4、文本溢出

案例1：单行文本溢出，超出末尾显示“…”

.box{
  width: 200px; // 必须给盒子设置宽
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  white-space: nowrap; // 设置不允许换行
  overflow: hidden; // 设置超出隐藏
  text-overflow: ellipsis; // 设置超出文本显示省略号
}

案例2：多行文本溢出，超出末尾显示“…”

.box{
  width: 200px; // 必须给盒子设置宽
  height: 150px; // 必须给盒子设置高
  line-height: 30px;
  border: 1px solid red;
  overflow: hidden;
  display: -webkit-box; // 目前只有webkit内核的支持多行超出显示省略号
  -webkit-line-clamp: 5; // 行数
  -webkit-box-orient: vertical; // 排列方向
}

5、无法阻止的默认行为

案例：网页上视频播放时，滚动鼠标滚轮，视频底下的页面还会滚动

// 这样写阻止不了,原因：浏览器针对耗时耗性能事件，不去阻止默认行为
widow.addEventListener('wheel', wheelHandler);
// passive: false 告诉浏览器用户要阻止默认行为
widow.addEventListener('wheel', wheelHandler, {passive: false});
function wheelHandler (e) {
  e.preventDefault();
}

6、触底加载实现方式优选

案例：长列表，实现触底加载下一页数据，监控鼠标滚动事件太浪费性能，另一种方式是监控页面底部的loading元素是否出现在可视区域内，出现在可视区域，说明滑动到底部了，触发请求数据

/*
H5 API提供的构造函数
new IntersectionObserver(callBack, option);
*/
// 建立观察者
let ob = new IntersectionObserver((entries) => {
  // 被观察元素进入和离开指定区域都会触发此回调函数
  let entry = entries[0]; // entries为监控的元素集合，是个数组，监控一个元素，就去取entries[0]
  if (entry.isIntersecting) { // isIntersecting： true-进入区域 false-离开区域
    console.log('进入-加载更多');
  } else {
    console.log('离开');
  }
}, {
  // root: null, // 指定根元素，未指定或为null则为浏览器视窗
  thresholds: 0.1, // 观察目标和视窗的重叠范围，0~1取值，1是完全重叠,到指定位置触发回调函数
})
// 获取观察元素
let loading = document.getElementById('loading');
// 观察
ob.observe(loading);

7、web页面失活后计时器问题

案例：页面有计时器，浏览器离开当前页面，切换到另一个标签页，离开的这段事件，有计时器的失活页面回出现计时不准的问题

/*
  setIntervale(() => {}, 10)
  setIntervale的时间间隔，以谷歌浏览器为例（不同浏览器会不同），浏览器为了其他页面的性能，减少消耗，
  会把失活页面的计时器时间间隔调到1秒以上，
  所以，时间间隔小于1秒的计时器，在页面失活后，计时就不准了。
*/
// 解决方法 监听页面可见度变化，然后做处理
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 离开本标签页
  }
  if (document.visibilityState === 'visible') {
    // 返回本标签页
  }
})