Ik probeer een fade-out-effect te maken voor een divmet puur JavaScript.
Dit is wat ik momenteel gebruik:
//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function() {
if (fadeTarget.style.opacity < 0.1)
{
clearInterval(fadeEffect);
}
else
{
fadeTarget.style.opacity -= 0.1;
}
}, 200);
}
De div zou vloeiend moeten verdwijnen, maar verdwijnt onmiddellijk.
Wat is er aan de hand? Hoe kan ik het oplossen?
Antwoord 1, autoriteit 100%
Aanvankelijk als er geen dekking is ingesteld, is de waarde een lege tekenreeks, waardoor uw rekenkunde zal mislukken. Dat wil zeggen, "" < 0.1 == trueen je code gaat naar de clearIntervalbranch.
Je kunt het standaard op 1 zetten en het zal werken.
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);#target {
height: 100px;
background-color: red;
}<div id="target">Click to fade</div>Antwoord 2, Autoriteit 33%
Just vanmorgen vond ik dit stuk code op http://vanilla-js.com , het is erg eenvoudig, compact en snel:
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
U kunt de snelheid van de FADE wijzigen die de tweede parameter wijzigen in de setTimeOut-functie.
Antwoord 3, Autoriteit 15%
Het lijkt erop dat je het een andere manier kunt doen (ik heb misschien fout).
event.target.style.transition = '0.8s';
event.target.style.opacity = 0;
Antwoord 4, Autoriteit 7%
U kunt CSS-overgangseigenschap gebruiken in plaats van VAI-timer in JavaScript te doen. Dat is meer prestatie georiënteerd in vergelijking met wat je doet.
Controleer
http://fvsch.com/code/transition-fade/test5. html # test3
Antwoord 5, Autoriteit 2%
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);#target {
height: 100px;
background-color: red;
}<div id="target">Click to fade</div>Antwoord 6
Naast het geaccepteerde antwoord hebben we nu waapi die in feite animatie-API aan Javascript voegt.
Bijvoorbeeld,
/**
* @returns {Object}
*/
function defaultFadeConfig() {
return {
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
}
}
/**
* @param {HTMLElement} el
* @param {number} durationInMs
* @param {Object} config
* @returns {Promise}
*/
async function fadeOut(el, durationInMs, config = defaultFadeConfig()) {
return new Promise((resolve, reject) => {
const animation = el.animate([
{ opacity: '1' },
{ opacity: '0', offset: 0.5 },
{ opacity: '0', offset: 1 }
], {duration: durationInMs, ...config});
animation.onfinish = () => resolve();
})
}
/**
* @param {HTMLElement} el
* @param {number} durationInMs
* @param {Object} config
* @returns {Promise}
*/
async function fadeIn(el, durationInMs, config = defaultFadeConfig()) {
return new Promise((resolve) => {
const animation = el.animate([
{ opacity: '0' },
{ opacity: '0.5', offset: 0.5 },
{ opacity: '1', offset: 1 }
], {duration: durationInMs, ...config});
animation.onfinish = () => resolve();
});
}
window.addEventListener('load', async ()=> {
const el = document.getElementById('el1');
for(const ipsum of "Neque porro quisquam est qui dolorem ipsum quia dolor \uD83D\uDE00".split(' ')) {
await fadeOut(el, 1000);
el.innerText = ipsum;
await fadeIn(el, 2000);
}
});.text-center {
text-align: center;
}<h1 id="el1" class="text-center">...</h1>