我遇到了以下情況的麻煩。我有一個按鈕，其作用類似于普通的切換開關。當我單擊“動畫”按鈕時，我希望<p>This is new Div</p>當我再次單擊該按鈕時淡入Animate，它<p>應該淡出。我怎樣才能實現這個目標？const main = document.getElementById('main');const btn = document.getElementById('btn');let show = false;btn.addEventListener('click', () => { if(show) { const newDiv = document.getElementById("new-div"); newDiv.remove(); show = false; } else { const newDiv = document.createElement('div'); newDiv.id = "new-div"; newDiv.innerHTML = "<p>This is new Div</p>"; main.appendChild(newDiv); show = true; }})#new-div { transition: all 2s ease-in-out;}<div id="main"> <button id="btn">Animate</button></div>我實際上正在構建一個畫廊布局應用程序，它需要在單擊圖像時淡入+全屏顯示，然后在單擊時淡出到其原始位置。由于會有很多圖像，我想使用JS來動態處理這個問題。迄今為止最大的障礙是實施fade-out，因為該元素正在被刪除。
4 回答
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
根據您的信息，我制作了一個改進的版本，請參閱下面的小提琴和代碼： https: //jsfiddle.net/Kenvdb/8nsbp16o/
JavaScript：
const main = document.getElementById('main');
const btn = document.getElementById('btn');
let toggledDiv = null;
btn.addEventListener('click', () => {
if (!toggledDiv) {
show();
} else {
hide();
}
})
const show = () => {
toggledDiv = document.createElement('div');
toggledDiv.id = "content";
toggledDiv.style.opacity = "1";
toggledDiv.innerHTML = "<p>This is new Div</p>";
main.appendChild(toggledDiv);
}
const hide = () => {
toggledDiv.style.animation = "fade-out 0.5s ease-in";
toggledDiv.style.opacity = "0";
toggledDiv.addEventListener('animationend', remove);
toggledDiv.addEventListener('webkitAnimationEnd', remove);
}
const remove = () => {
toggledDiv.remove();
toggledDiv = null;
};
CSS：
#content {
opacity: 0;
animation: fade-in 0.5s ease-in;
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
HTML：
<div id="main">
<button id="btn">Animate</button>
</div>
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
您需要先將不透明度設置為 0。然后您可以應用關鍵幀動畫。否則，該元素沒有任何可從中進行轉換的元素。
見下文。
#new-div {
opacity: 1;
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
翻閱古今
TA貢獻1780條經驗 獲得超5個贊
有幾種方法可以做到這一點。您可以使用以下屬性設置新添加元素的不透明度style：
const main = document.getElementById('main');
const btn = document.getElementById('btn');
let show = false;
let fading = false;
btn.addEventListener('click', () => {
if (fading) return;
if (show) {
const newDiv = document.getElementById("new-div");
newDiv.style = "opacity: 0"; // start the fade
fading = true;
window.setTimeout(function() {
fading = false; // disable showing/hiding while fading
newDiv.remove(); // remove after fade completed
show = false;
}, 2000);
} else {
show = true;
const newDiv = document.createElement('div');
newDiv.id = "new-div";
newDiv.innerHTML = "<p>This is new Div</p>";
main.appendChild(newDiv);
window.setTimeout(function() {
newDiv.style = "opacity: 1"; // Start fading after a minimal time
});
}
})
#new-div {
transition: all 2s ease-in-out;
opacity: 0;
}
<div id="main">
<button id="btn">Animate</button>
</div>
或者您可以使用 jQuery，這會顯著減少代碼：
$("#btn").on('click', () => {
var newDiv = $("#new-div");
if (newDiv.length) {
newDiv.stop().fadeOut(2000, function() {
newDiv.remove();
});
} else {
$(`<div id='new-div'>
<p>This is new Div</p>
</div`).appendTo("#main").hide().fadeIn(2000);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<button id="btn">Animate</button>
</div>
慕村225694
TA貢獻1880條經驗 獲得超4個贊
您可以簡單地使用jQuery 中的fadeIn()和fadeOut()方法來完成此操作。
這是一個例子：
let alreadyClicked = false;
$("#btn").click(function() {
if(alreadyClicked == false) {
$("p").remove(); //Remove the paragraph if already created.
$("#main").append("<p style='display: none;'>Hello, world!</p>"); //Create a paragraph.
$("p").fadeIn(); //Show it by fading it in.
alreadyClicked = true;
} else {
$("p").fadeOut(); //Fade it out
alreadyClicked = false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<button id="btn">Animate</button>
</div>
- 4 回答
- 0 關注
- 231 瀏覽
添加回答
舉報
0/150
提交
取消