javascript - color - La suavidad del golpe difiere entre divs

get style javascript

Question

Estoy usando react-swipeable-views en mi proyecto para habilitar eventos de deslizamiento táctil. Puedo deslizar entre diferentes div , que están dentro de <SwipeableViews/> . Tengo tres divs diferentes, de los cuales, en la 1ª div, tengo una lista de imágenes. En los otros dos divs restantes, no hay nada.

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>
        );
    }
}

Sin embargo, slide2 entre slide2 y slide3 es muy suave. Pero cuando se slide1 entre slide1 y slide2 , es un poco desigual y no suave. Y cuando verifico en la consola de Chrome, recibo este error:

Tareas del temporizador de ejecución diferida para mejorar la suavidad del desplazamiento. Ver crbug.com/574343.

: 3000 / # / profile / photos? _K = 4qkf5g: 1

Si elimino las imágenes del primer div, está funcionando muy bien otra vez. ¿Qué puedo hacer para suavizar el deslizamiento (mientras tengo las imágenes en la primera división) entre la primera y la segunda división? Por favor, ayúdame.

Answer 1

Podría valer la pena probar la propiedad css ''will-change'' para indicar al navegador que es probable que los elementos se muevan.

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

Answer 2

Si tiene algo que ver con el motor de renderizado, podría activar la GPU, que es más rápida que la CPU, aplicando algún tipo de transformación css (por ejemplo, rotate(0.00001deg) ) antes de que se deslice el deslizamiento de inicio, y luego eliminar la transformación al deslizar hecho.

Por cierto, no sé si esto aumentará mucho el rendimiento de su control deslizante, pero vale la pena intentarlo.