div之间的滑动平滑度不同答案

【问题标题】：Swipe smoothness differ between divsdiv之间的滑动平滑度不同
【发布时间】：2016-11-08 18:11:52
【问题描述】：

我在我的项目中使用react-swipeable-views 来启用触摸滑动事件。我可以在<SwipeableViews/> 内部的不同div 之间滑动。我有三个不同的 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/#/profile/photos?_k=4qkf5g:1

如果我从第一个 div 中删除图像，它会再次非常顺利地工作。我能做些什么来平滑第一个 div 和第二个 div 之间的滑动（同时在第一个 div 中有图像）？请帮帮我。

【问题讨论】：

滑动完成后尝试使用计时器加载幻灯片 1 的图像
你可以考虑研究的一件事是 react-canvas。 Flipboard 使用画布在移动网站上做了一些很棒的事情，让它感觉非常流畅。
您好，我已将WebpackBin demo 与您的代码放在一起，请查看。在我的（四核）笔记本电脑上，一切看起来都如丝般顺滑。
能否提供jsfiddle和codepan链接？看看实际做了什么。

标签： javascript reactjs swipe

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

可能值得尝试使用 css 属性 'will-change' 告诉浏览器元素可能会移动。

https://css-tricks.com/almanac/properties/w/will-change/

【讨论】：