1，css的属性：step属性可以在css动画里设置，防止雪碧图鬼畜，
antimation：run 1s step(12) infinite.
2.一行css代码设置动画暂停恢复：
.container:hover{
antimation-play-state:running
}
3.粘性定位实现用户列表交互：（比如联系人的按字母排序，A标题直到没有A开头的联系人后才转为B）
dt{
position:sticky;//设置定位
top:0;//相对于最近的设置了overflow的元素
}
4.多行文本溢出：
单行：
.{
`white-space：nowrap；
overflow:hidden;
text-overflow:ellipsis;`
}
多行：
.{
display:-webkit-line-clamp:5;
overflow:hidden;
-webit-line-clamp:vertical;
}
5.正确取消事件默认行为：
事件监听事件里面添加第三个参数passive：false，减少浏览器监听和渲染的耗时效率问题。
window.addEventListener('wheel',wheelHandler,{passive:true})
6.页面加载滑到底部，加载更多，监听元素层叠：
首先获取这个loading图片：
var loading = document.querySelector('.loading')
建立观察者:entries为渲染对象，root为观察到的元素和哪一个重叠,thresholds重叠多少（0-1）,isLoading是判断是不是第一次加载首页面,more()函数为加载下一页数据。
var ob = new IntersectionObserver(function(entries){var entry = entries[0];if(entry.isIntersecting &&!isLoading){more()}},{root:,thresholds:0.1})
ob.observe(loading)
7.切换页面时，定时器失活问题：
切换标签页，浏览器默认隐藏后不那么频繁触发定时器：
监听页面隐藏后调用暂停，回来后调用开始。
document.addEventListener('visibilitychange',function(){if(document.visibilityState === 'hidden'){stop()}else{start()}})
8.鼠标函数：事件处理传入参数e： 鼠标事件对象：
e.x,e.clientX是鼠标到视口左侧距离，
e.y,e.clientY是鼠标到视口顶部距离，
e.pageX是鼠标到页面左侧的距离。
e.screenX是鼠标到屏幕左侧的距离。
e.movementX是鼠标到上一次位置的横向距离。
9.排序动画flip思想：
var f = new Filp('element')
f.play()
f：first，记录起始位，l：last，记录结束位置，i：invert，反转元素到起始位置，p：play，播放动画到结束位置。
10.css3 transition过渡问题： 修改了n个属性触发n次事件，
在监听事件里添加第三个属性：once:true
element.addEventListener('transition',()=>{},{once:true})
