我遇到了以下情況的麻煩。我有一個(gè)按鈕，其作用類似于普通的切換開關(guān)。當(dāng)我單擊“動(dòng)畫”按鈕時(shí)，我希望<p>This is new Div</p>當(dāng)我再次單擊該按鈕時(shí)淡入Animate，它<p>應(yīng)該淡出。我怎樣才能實(shí)現(xiàn)這個(gè)目標(biāo)？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>我實(shí)際上正在構(gòu)建一個(gè)畫廊布局應(yīng)用程序，它需要在單擊圖像時(shí)淡入+全屏顯示，然后在單擊時(shí)淡出到其原始位置。由于會(huì)有很多圖像，我想使用JS來(lái)動(dòng)態(tài)處理這個(gè)問(wèn)題。迄今為止最大的障礙是實(shí)施fade-out，因?yàn)樵撛卣诒粍h除。
4 回答
慕俠2389804
TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊
根據(jù)您的信息，我制作了一個(gè)改進(jìn)的版本，請(qǐng)參閱下面的小提琴和代碼： 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貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
您需要先將不透明度設(shè)置為 0。然后您可以應(yīng)用關(guān)鍵幀動(dòng)畫。否則，該元素沒(méi)有任何可從中進(jìn)行轉(zhuǎn)換的元素。
見(jiàn)下文。
#new-div {
opacity: 1;
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
翻閱古今
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊
有幾種方法可以做到這一點(diǎn)。您可以使用以下屬性設(shè)置新添加元素的不透明度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，這會(huì)顯著減少代碼：
$("#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貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以簡(jiǎn)單地使用jQuery 中的fadeIn()和fadeOut()方法來(lái)完成此操作。
這是一個(gè)例子：
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 關(guān)注
- 266 瀏覽
添加回答
舉報(bào)
0/150
提交
取消