शुद्ध जावास्क्रिप्ट

Question

के साथ और अधिक लिंक पढ़ें मैं एक सरल बनाने की कोशिश कर रहा हूं और पढ़ें उदाहरण। इसमें एक अनुच्छेद और एक बटन होता है जिसमें एक अनुच्छेद टैग में संलग्न अनुच्छेद के आधा भाग होता है जिसे प्रारंभ में छिपाने के लिए सेट किया जाता है। जब उपयोगकर्ता अधिक पढ़ें बटन पर क्लिक करता है तो छिपी हुई अवधि दिखाई देती है। मुझे कामकाजी कोड मिल गया है, लेकिन सिर्फ JQuery की तरह फीका करना है लेकिन शुद्ध जावास्क्रिप्ट के साथ। कृपया कोई मदद करें।

var span = document.getElementsByTagName('span')[0]; 
 
var hideshow = document.getElementById('hideshow'); 
 

 
span.style.display = 'none'; 
 

 
hideshow.onclick = function() { 
 
    span.style.display = 'block'; 
 
};

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 

 
<button id="hideshow">Read More</button>

Answer 1

यहाँ शुरू

span.style.opacity = 0; 

आप धीरे-धीरे यहाँ करने के लिए अस्पष्टता संक्रमण के लिए की आवश्यकता होगी।

span.style.opacity = 1; 

आप, क्योंकि एक तुल्यकालिक एक (while/for/for-in/forEach) मुख्य थ्रेड को अवरुद्ध कर देगा, वास्तव में से ब्राउज़र को रोकने के लिए बार-बार दोहराना एक अतुल्यकालिक निर्माण (setTimeout/setInterval/requestAnimationFrame) का उपयोग करना होगा अद्यतन अस्पष्टता के साथ तत्व प्रतिपादन।

function fadeIn(element) { 

    function transition() { 
    if(element.style.opacity < 1) { 
     requestAnimationFrame(transition); 
     element.style.opacity = Number(element.style.opacity) + 0.05; 
    } 
    } 

    transition(); 
} 

वैकल्पिक रूप से

, यदि आप सीएसएस का उपयोग करने के (बल्कि शुद्ध जे एस की तुलना में) आप वर्गों और बदलाव के साथ ऐसा कर सकते हैं खुश हैं।

.out { 
    opacity: 0; 
    transition-duration: 0.5s; 
} 

.in { 
    opacity: 1; 
    transition-duration: 0.5s; 
} 

सुनिश्चित करें कि तत्व out वर्ग जब यह डोम में आता है जब आप इसे में फीका करने के लिए तैयार हैं, तो, यह in वर्ग के लिए स्वैप और ब्राउज़र आप के लिए एनीमेशन संभाल लेंगे।

Answer 2

एक दृष्टिकोण तत्व की अस्पष्टता को बदलने के लिए CSS3 transition का उपयोग करना है।

नीचे दिए गए उदाहरण में, fade-in कक्षा को क्लिक करते समय span तत्व में जोड़ा गया है।

var button = document.querySelector('.read-more'); 
 

 
button.addEventListener('click', function(event) { 
 
    var span = event.target.previousElementSibling.querySelector('span'); 
 
    span.classList.add('fade-in'); 
 
});

.show-more span { 
 
    display: inline-block; 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: opacity 2s; 
 
    opacity: 0; 
 
} 
 
.show-more span.fade-in { 
 
    height: auto; 
 
    opacity: 1; 
 
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button>

आप एक दृष्टिकोण है कि एक से अधिक तत्वों के लिए काम करता है चाहते हैं, तो आप निम्नलिखित भी इस्तेमाल कर सकते हैं:

var buttons = document.querySelectorAll('.read-more'); 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', function(event) { 
 
    var span = event.target.previousElementSibling.querySelector('span'); 
 
    span.classList.add('fade-in'); 
 
    }); 
 
}

.show-more span { 
 
    display: inline-block; 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: opacity 2s; 
 
    opacity: 0; 
 
} 
 
.show-more span.fade-in { 
 
    height: auto; 
 
    opacity: 1; 
 
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button> 
 

 
<p class="show-more">Another shorter paragraph. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p> 
 
<button class="read-more">Read More</button>

Answer 3

var duration = 2000; // msecs 

document.getElementById('hideshow').onclick =() => { 
    requestAnimationFrame((start_time) => { 
     var anim = (time) => { 
     var p = (time - start_time)/duration; 
     (p < 1) && requestAnimationFrame(anim); 
     span.style.opacity = 1 - p; 
     } 
     anim(start_time); 
    }) 
}