transition
transform
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。
好处是，transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
animation
animate
var animation = element.animate(keyframes, options);
animate()方法是一个创建新Animation的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的Animation对象实例。
dom.animate([
// keyframe
{ transform: 'translateX(0)' },
{ transform: 'translateX(-300px)' },
], {
duration: 1000 * 20, // 20s
delay: 1000 * 0.5, // 500 ms
easing: 'linear',
iterations: Infinity,
})
无限轮播
轮播原理.png
.swiper-box {
animation: move-roll 20s linear .5s infinite;
}
@keyframes move-roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300px);
}
}
监听 CSS animation 动画的事件:
// 只对 CSS animation 动画有效
dom.addEventListener("animationend", (e) => {
// 一次动画结束
});
dom.addEventListener("animationstart", (e) => {
// 一次动画开始
});
dom.addEventListener("animationiteration", (e) => {
// 动画重复执行
});
这些监听事件对 animate() 是无效的。
公告轮播
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
<div class="swiper-box" ref={swiperRef}>
<p>这是轮播内容</p>
{ // 只有在需要轮播时，才能追加这个影子
isRoll ? (<p style="padding-left: 60px">这是轮播内容</p>) : null
}
<div>
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
useEffect(() => {
if(!text) return;
const { clientWidth, firstChild } = swiperRef.current;
// 内容长度
const txtWidth = (firstChild as HTMLParagraphElement).scrollWidth;
// 是否启用轮播：文本宽度大于 父元素上设置的宽度了，则开启轮播
setRoll(txtWidth > clientWidth);
}, [text])
useEffect(() => {
if(!isRoll) return
const { clientWidth, lastChild } = swiperRef.current
// 内容 + padding 长度
const offsetX = (lastChild as HTMLParagraphElement).scrollWidth
// 计算一次动画的时间，这里的动画时间基数是 30s
// 基数计算方式：当文本长度刚好 = 父元素宽度时，不断调整动画时间，速度合适的时间就是基数时间
const duration = Math.round(offsetX / clientWidth * 30 * 100) / 100
// 开始轮播
const animation = swiperRef.current.animate([
// keyframe
{ transform: 'translateX(0)' },
{ transform: `translateX(-${offsetX}px)` },
], {
duration: 1000 * duration,
delay: 1000 * 0.5,
easing: 'linear',
iterations: Infinity,
})
return () => {
animation.cancel()
}
}, [isRoll])
兼容性：如果不支持 animate()，那么我们可以动态创建 <style> + @keyframes，插入 <head>, 但也要记得移除。
// 准备样式文本
const keyframes = `
@keyframes move{
from{
transform: translateX(0);
}
to{
transform: translateX(300px);
}
}
`
// 创建 <style>
const style = document.createElement('style')
style.id = 'swiperKeyframes' // 加上 id，方便移除
style.type = 'text/css'
// 插入样式文本
const textNode = document.createTextNode(keyframes);
style.appendChild(textNode);
// 把 <style> 插入 <head>
const head = document.head || document.getElementsByTagName('head')[0]
head.appendChild(style)
// 如果css是external的话会报错：
// Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
// styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
// 移除
const style = document.querySelectorAll("#swiperKeyframes")
style.forEach(keyframe => document.head.removeChild(keyframe))
网友评论