स्वाइप चिकनीपन divs

Question

के बीच भिन्न है, मैं टच स्वाइप घटनाओं को सक्षम करने के लिए अपने प्रोजेक्ट में react-swipeable-views का उपयोग कर रहा हूं। मैं विभिन्न div के बीच स्वाइप कर सकता हूं, जो <SwipeableViews/> के अंदर हैं। मेरे पास तीन अलग-अलग divs हैं, जिनमें से, पहले div में, मेरे पास छवियों की सूची है। अन्य दो शेष divs में, कुछ भी नहीं है।

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 के बीच स्वाइप करते समय, यह थोड़ी झटकेदार और चिकनी नहीं है।

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

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

अगर मैं हटाने छवियों 1 div के रूप में, यह बहुत आसानी से फिर से काम कर: और जब मैं क्रोम कंसोल में जाँच, मैं इस त्रुटि हो रही है। 1 div और 2 div के बीच स्वाइपिंग (पहली div में छवियों को रखते हुए) को सुगम बनाने के लिए मैं क्या कर सकता हूं? क्रिप्या मेरि सहायता करे।

Answer 1

यदि उसके पास प्रतिपादन इंजन के साथ कुछ करने के लिए कुछ है, तो आप GPU को ट्रिगर कर सकते हैं, जो सीपीयू से तेज़ है, स्लाइड शुरू होने से पहले कुछ प्रकार के सीएसएस रूपांतरण (जैसे rotate(0.00001deg)) लागू करना, और फिर स्वाइप पर परिवर्तन को हटा दें किया हुआ।

वैसे, मुझे नहीं पता कि यह आपके स्लाइडर प्रदर्शन को बहुत बढ़ाएगा, लेकिन यह कोशिश करने लायक है।

Answer 2

ब्राउज़र को बताने के लिए सीएसएस संपत्ति 'विल-चेंज' की कोशिश करने लायक हो सकता है कि तत्वों को स्थानांतरित होने की संभावना है। टाइमर का उपयोग slide1 की छवियों को लोड करने के लिए

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