div之间的滑动平滑度不同

Question

我在项目中使用react-swipeable-views来启用触摸滑动事件.我可以在不同div的内部之间滑动<SwipeableViews/>.我有三个不同的div,其中,在第一个div中,我有图像列表.在剩下的两个div中,什么也没有.

export default class Photos extends React.Component {
    render() {
        const styles = {
          slide: {
            padding: '15px',
            minHeight: '500px',
            color: '#fff',
          },
          slide1: {
            background: '#FEA900',
            overflowY: 'hidden'
          },
          slide2: {
            background: '#B3DC4A',
          },
          slide3: {
            background: '#6AC0FF',
          }
        }

        return(
            <div id="profile_photos">

               <div id="profile_photos_nav">
                   <span class="photo_nav" id="photo_timeline">
                       <button class="active_btn">Timeline Photos</button>
                    </span>
                   <span class="photo_nav" id="photo_profile">
                       <button>Profile Photos</button>
                   </span>
                   <span class="clear_both"></span>
               </div>

               <SwipeableViews>
                    <div style={Object.assign({}, styles.slide, styles.slide1)}>
                        <img src="img/img3.jpg"/>
                        <img src="img/img5.jpg"/>
                        <img src="img/img6.jpg"/>
                        <img src="img/img7.jpg"/>
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide2)}>
                        slide n°2
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide3)}>
                      slide n°3
                    </div>
                </SwipeableViews>

            </div>
        );
    }
}

但是,在之间滑动slide2并且slide3非常平滑.但是在slide1和之间滑动时slide2,它有点生涩而且不平滑.当我检查chrome控制台时,我收到此错误:

延迟长时间运行的计时器任务以提高滚动平滑度.见crbug.com/574343.

:3000 /#/资料/照片= _K 4qkf5g:1

如果我从第一个div中删除图像,它的工作再次非常顺利.我可以做些什么来平滑第一个div和第二个div之间的滑动(同时在第一个div中有图像)？请帮我.

Answer 1

如果它与渲染引擎有关，您可以触发 GPU，它比 CPU 更快，rotate(0.00001deg)在幻灯片开始滑动之前应用某种 css 转换（例如 ），然后在滑动完成时删除转换。

顺便说一句，我不知道这是否会大大提高您的滑块性能，但值得尝试。