纯CSS的无限滚动轮播效果

背景

某天发现OKX的一个页面的无限轮播效果比较好, dom节点为 '.ticker-container'。

效果demo

animation实现的可pause的无限轮播动画

关键点

1、 本想调试一下okx的代码，结果chrome devtool没办法进行，排查是它使用style components生成的css代码

原因: 看这个 style components使用 CSSOM操作插入样式，导致无法调试更改样式

解决方案:

1. 使用ff浏览器
2. 开发环境进行调试
3. 不使用CSSOMInjection,回退到css静态文件插入的方式

2、实现原理

• 父级设置固定宽度+overflow:hidden
• 父级内部有2个list元素，单条list需要占满父级100%宽度，不然动画进行到100的时候会出现gap(第2个list宽度不够100%),如果宽度不够100%, 请增加list个数(比如到3个)
• 动画原理：100%动画时 前一个list会瞬时切回第2个list的位置，但因为两个list宽度完全一致 所以人感觉不到
• hover到父级时候，触发list元素暂停动画 animation-play-state: paused;

3、性能优化

• will-change: transform, opacity; 开启GPU加速 (translate3d(0,0,0)也是可以的)

其他方案

binance的这个页面利用slick实现 , dom节点为: slick-slider

参考

[1] Styled Component styles are disabled in Chrome DevTools

[2] https://github.com/kenwheeler/slick slick carousel

[3] https://styled-components.com/docs/api#stylesheetmanager disableCSSOMInjection 不使用CSSOMInjection

[4] https://stackoverflow.com/questions/52582995/impossible-to-edit-styles-in-chrome