“L'élément javascript s'estompe” Réponses codées

vanille javascript s'estompe

<div id="target">Click to fade</div>
<script>
  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)
</script>
<style>
  #target {
    height: 100px;
    background-color: red;
}
</style>
Undefined

L'élément javascript s'estompe

/*@lang css

#target {
    height: 100px;
    background-color: red;
    transition: opacity 1s;
}

*/

const target = document.getElementById("target");

target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());
Cheerful Crayfish

Réponses similaires à “L'élément javascript s'estompe”

Questions similaires à “L'élément javascript s'estompe”

Plus de réponses similaires à “L'élément javascript s'estompe” dans JavaScript

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code