用純JavaScript閱讀全文鏈接

Question

我正在嘗試創建一個簡單的Read More示例。它由一個段落和一個按鈕組成，其中一半的段落包含在最初設置爲隱藏的span標籤中。當用戶點擊Read More按鈕時，顯示隱藏的跨度。我已經得到了工作代碼，但只想像JQuery一樣使用純Javascript來淡化效果。任何人都請幫忙。

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; 

你需要使用迭代異步結構（setTimeout/setInterval/​​），因爲一個同步（while/for/for-in/forEach）會阻塞主線程，阻止瀏覽器實際上渲染具有更新的不透明度的元素。

function fadeIn(element) { 

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

    transition(); 
} 

或者，如果你樂於使用CSS（而不是純JS），您可以使用類和過渡做到這一點。

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

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

確保元素具有out類時，其到達的DOM，那麼當你準備淡出它，將其交換爲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); 
    }) 
}