每次點擊頁面都會顯示新的經文元素。現在我試圖讓不同的 Textparts 淡入。有沒有一種簡單的方法可以用我的 CSS 做到這一點？我已經嘗試添加
document.addEventListener('click', myFunction);
let verses = document.querySelector("#verses").children
let count = 0
function myFunction() {
Array.from(verses).forEach(el => el.style.display = "none")
if (count < verses.length) {
let el = verses[count]
el.classList.add("animating")
el.style.display = 'block'
//This function runs when the CSS animation is completed
var listener = el.addEventListener('animationend', function() {
el.classList.remove("animating");
});
count
if (count === verses.length) count = 0
}#verses {
position: relative;
overflow: hidden;
transition: opacity 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#verses.animating {
animation: fadeIn 1s;
}<div class="banner">
<div id="verses">
<div class="verse1" style="display: none">Lorem Ipsum.</div>
<div class="verse2" style="display: none">Lorem Ipsum.</div>
<div class="verse3" style="display: none">Lorem Ipsum.</div>
</div>我是否需要更改 JavaScript 中呼叫的行以在塊中顯示經文？我已經試過了el.style.opacity，但沒有用。我希望有一個更簡單的解決方案。
uj5u.com熱心網友回復：
太多的代碼試圖做同樣的事情......太混亂了，你也有不必要的行內樣式彈出。從好的方面來說，CSS 看起來不錯。通過專注于滿足您的目標的單一方法來簡化，即每次單擊下一個標簽時添加一個類，直到沒有剩余。
首先宣告一些要在事件處理程式（注冊到事件的函式）完成后保留的變數。一旦一個函式結束，它的所有變數都會被垃圾回收，如果有任何值（比如已經發生了多少次點擊），它將回到它的初始值。見閉包。
let counter = 0;
const quotes = [...document.querySelectorAll('cite')];
// Collect all <cite> tags into a NodeList then convert it into an array
接下來，將祖先標記（包含所有<cite>s 的標記，包括window、<html>標記、document、<body>標記等）注冊到“單擊”事件。開始定義事件處理程式，注意，所有事件處理程式都傳遞Event Object。
document.onclick = reveal;
function reveal(event) {//...
//reveal is the event handler
然后在事件處理程式中，確保它在通過所有<cite>s 后停止。
//...
if (counter >= quotes.length) {
return
}
//...
最后，應用當前計數器值作為引號陣列的索引號并添加.fadeIn類。最后一項任務是將計數器加 1。
//...
quotes[counter].classList.add('fadeIn');
counter ;
}
let counter = 0;
const quotes = [...document.querySelectorAll('cite')];
document.onclick = reveal;
function reveal(e) {
if (counter >= quotes.length) {
return
}
quotes[counter].classList.add('fadeIn');
counter ;
}html {
font: 2ch/1.25 'Segoe UI'
}
cite {
display: block;
width: 60%;
max-width: 540px;
margin: 20px auto 30px;
text-indent: -1.5ch;
opacity: 0;
}
.fadeIn {
animation: fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
q,
b {
display: block;
}
q::before {
content: '\00275d';
font-size: 1.25rem;
margin-right: 0.5ch;
color: #aaa;
}
q::after {
content: '\00275e';
font-size: 1.25rem;
color: #aaa;
}
b {
text-align: right;
}<header>
<h1>Click Anywhere!</h1>
</header>
<main>
<cite><q>Whenever you find yourself on the side of the majority, it is time to pause and reflect.</q>
<b>Mark Twain</b></cite>
<cite><q>Insanity: doing the same thing over and over again and expecting different results.</q>
<b>Albert Einstein</b></cite>
<cite><q>The journey of a thousand miles begins with one step.</q>
<b>Lao Tzu</b></cite>
<cite><q>That which does not kill us makes us stronger.</q>
<b>Friedrich Nietzsche</b></cite>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461981.html
標籤：javascript html css 网络 CSS 过渡
下一篇：如何從鏈接中隱藏檔案夾名稱