Wie man ein Element sanft einblendet/ausblendet, nachdem man ihm eine Anzeige gegeben hat: kein Wert

Question

Ich bin mir der vielen Fragen hier zu Stack Overflow ähnlich, die alle gelöst werden, indem visibility:hidden anstelle der display:none Eigenschaft verwendet wird. Das Problem, das ich habe, ist, denke ich, dass ich display:none verwenden muss, weil ich den Raum des divs füllen muss, das mit einem alternativen div versteckt wird, visibility:hidden würde gerade diesen Raum behalten, während er es unsichtbar macht.

MEIN ZIEL: Nachdem die Schaltfläche + geklickt wurde, wird das Element nav korrekt ausgeblendet. Nach dieser Animation habe ich eine JavaScript-Zeile, die 500 Millisekunden zählt und dann dem verblassten div eine Klasse gibt, die display:none enthält.

Das Problem ist, wenn die jetzt - Schaltfläche geklickt wird, gebe ich das Element wieder seine display:block Eigenschaft und entfernen Sie die Klasse, die sie ihre Unschärfe/Fade-Effekt gab. Aber statt eines schönen Überganges, erscheint das Element sofort auf dem Bildschirm. Keine Animation.

Ich bin ratlos, wie Sie dies beheben können, während Sie weiterhin die display:none-Eigenschaft verwenden. Danke für die Hilfe und ich benutze keine Bibliotheken wie jQuery, nur Plain Vanilla Javascript.

var expand = document.getElementById("expansion"); 
 

 
function removeElm() { 
 
    "use strict"; 
 
    document.querySelector("nav").classList.add("removed"); 
 
    document.querySelector("#description").classList.remove("removed"); 
 
} 
 

 
function expandF() { 
 
    "use strict"; 
 
    var navLi = document.querySelectorAll("li"), i; 
 
    
 
    if (!document.querySelector("nav").classList.contains("out")) { 
 
    document.querySelector("nav").classList.add("out"); 
 
    document.querySelector("body").style.background = "#dff"; 
 
    document.getElementById("expansion").innerHTML = "-"; 
 
    document.getElementById("expansion").style.background = "#f00"; 
 
    
 
    for (i = 0; i < navLi.length; i++) { 
 
     navLi[i].classList.add("rsHover"); 
 
    } 
 
    setTimeout(removeElm, 500); 
 
    } else { 
 
    document.querySelector("nav").classList.remove("removed"); 
 
    document.querySelector("#description").classList.add("removed"); 
 
    document.querySelector("nav").classList.remove("out"); 
 
    document.querySelector("body").style.background = "#fff"; 
 
    document.getElementById("expansion").innerHTML = "+"; 
 
    document.getElementById("expansion").style.background = "#222"; 
 
    
 
    for (i = 0; i < navLi.length; i++) { 
 
     navLi[i].classList.remove("rsHover"); 
 
    } 
 
    } 
 
} 
 

 
expand.addEventListener("click", expandF);

/*///////////////////////////////// __NAV__ /////////////////////////////////*/ 
 
nav { 
 
    display: inline-block; position: relative; top: 50%; right: 19px; 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto 
 
} 
 
nav ul:after { content: ""; display: block; clear: both } /* << clearfix */ 
 

 
nav ul { font-size: 100%; text-transform: uppercase; margin: 0; padding: 0 } 
 
nav li { width: 150px; height: 150px; list-style: none; float: left; margin: 5px} 
 
nav li:hover { background: #055; color: #eee; cursor:pointer } 
 
nav span { 
 
    display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%) 
 
} 
 
/*///////////////////////////////// SECTION /////////////////////////////////*/ 
 
#description { 
 
    display: inline-block; position: relative; top: 50%; right: 19px; 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto 
 
} 
 
/*///////////////////////////////// _MISC__ /////////////////////////////////*/ 
 
.removed { display: none !important } 
 
.rsHover:hover { background: #dff } 
 
.out { 
 
    -webkit-filter: blur(60px); filter: blur(60px); color: #fff; 
 
    -webkit-transform: scale(0.1, 0.9); transform: scale(0.1, 0.9); 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 110%; 
 
} 
 
/*///////////////////////////////// _ANIM__ /////////////////////////////////*/ 
 
body{ -webkit-transition:2s ease; transition:2s ease } 
 

 
nav{ 
 
    -webkit-transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease; 
 
    transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease; 
 
    transition:filter 1s ease, color 1s ease, transform 1s ease; 
 
    transition:filter 1s ease, color 1s ease, transform 1s ease, -webkit-filter 1s ease, 
 
    -webkit-transform 1s ease; 
 
}

<head> 
 
    <style> 
 
    html,body { height: 100%; text-align: center; color: #222; margin: 0 } 
 
    #expansion { 
 
     float:left; position: relative; top: 50%; -webkit-transform: translateY(-50%); 
 
     transform: translateY(-50%); width: 28px; height: 28px; padding: 5px; 
 
     margin: auto; color: #666; font-size: 150% 
 
    } 
 
    #expansion:hover { background: #222; color: #eee; cursor:pointer; } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="expansion">+</div> 
 
    <nav> 
 
    <ul> 
 
     <li><span>one</span> 
 
     </li> 
 
     <li><span>two</span> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <section id="description" class="removed"> 
 
    <h1>about web</h1> 
 
    <p> 
 
     WEB is a reference of... 
 
    </p> 
 
    </section> 
 
</body>

Answer 1

Sie müssen den Browser zwingen, das Element zu machen, nachdem display: block Einstellung um sicherzustellen, dass das Element in dem Dokumentenfluss ist, wird es als sonst macht keine Übergänge oder Animationen. Verwenden Sie Reflow:

Ihr Element in der aktuellen versteckt (display: none) Zustand:

<div style="display: none; opacity: 0; transition: opacity 500ms"></div> 

JS, um es in Fluss und dann Übergang zu Opazität: 1:

div.style.display = 'block'; 
div.clientHeight; // Forces the browser to "reflow" 
div.style.opacity = 1; // Now the element will transition from opacity: 0 to opacity: 1 

Wo div ist das Htmlelement Objekt. Beachten Sie, dass opacity nur ein Beispiel ist.

empfehle ich Ihnen dies zu verstehen, lesen (wie es ein wirklich komplexes Thema ist): http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

bearbeiten: geändert currentHeight-clientHeight.

Answer 2

var expand = document.getElementById("expansion"); 
 

 
function removeElm() { 
 
    "use strict"; 
 
    document.querySelector("nav").classList.add("removed"); 
 
    document.querySelector("#description").classList.remove("removed"); 
 
} 
 

 
function expandF() { 
 
    "use strict"; 
 
    var navLi = document.querySelectorAll("li"), i; 
 
    
 
    if (!document.querySelector("nav").classList.contains("out")) { 
 
    document.querySelector("nav").classList.add("out"); 
 
    document.querySelector("body").style.background = "#dff"; 
 
    document.getElementById("expansion").innerHTML = "-"; 
 
    document.getElementById("expansion").style.background = "#f00"; 
 
    
 
    for (i = 0; i < navLi.length; i++) { 
 
     navLi[i].classList.add("rsHover"); 
 
    } 
 
    setTimeout(removeElm, 500); 
 
    } else { 
 
    document.querySelector("nav").classList.remove("removed"); 
 
    document.querySelector("#description").classList.add("removed"); 
 
    document.querySelector("nav").classList.remove("out"); 
 
    document.querySelector("body").style.background = "#fff"; 
 
    document.getElementById("expansion").innerHTML = "+"; 
 
    document.getElementById("expansion").style.background = "#222"; 
 
    
 
    for (i = 0; i < navLi.length; i++) { 
 
     navLi[i].classList.remove("rsHover"); 
 
    } 
 
    } 
 
} 
 

 
expand.addEventListener("click", expandF);

/*///////////////////////////////// __NAV__ /////////////////////////////////*/ 
 
nav { 
 
    display: inline-block; position: relative; top: 50%; right: 19px; 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto 
 
} 
 
nav ul:after { content: ""; display: block; clear: both } /* << clearfix */ 
 

 
nav ul { font-size: 100%; text-transform: uppercase; margin: 0; padding: 0 } 
 
nav li { width: 150px; height: 150px; list-style: none; float: left; margin: 5px} 
 
nav li:hover { background: #055; color: #eee; cursor:pointer } 
 
nav span { 
 
    display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%) 
 
} 
 
/*///////////////////////////////// SECTION /////////////////////////////////*/ 
 
#description { 
 
    display: inline-block; position: relative; top: 50%; right: 19px; 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto 
 
} 
 
/*///////////////////////////////// _MISC__ /////////////////////////////////*/ 
 
.removed { display: none !important } 
 
.rsHover:hover { background: #dff } 
 
.out { 
 
    -webkit-filter: blur(60px); filter: blur(60px); color: #fff; 
 
    -webkit-transform: scale(0.1, 0.9); transform: scale(0.1, 0.9); 
 
    -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 110%; 
 
} 
 
/*///////////////////////////////// _ANIM__ /////////////////////////////////*/ 
 
body{ -webkit-transition:2s ease; transition:2s ease } 
 

 
nav{ 
 
    -webkit-transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease; 
 
    transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease; 
 
    transition:filter 1s ease, color 1s ease, transform 1s ease; 
 
    transition:filter 1s ease, color 1s ease, transform 1s ease, -webkit-filter 1s ease, 
 
    -webkit-transform 1s ease; 
 
}

<head> 
 
    <style> 
 
    html,body { height: 100%; text-align: center; color: #222; margin: 0 } 
 
    #expansion { 
 
     float:left; position: relative; top: 50%; -webkit-transform: translateY(-50%); 
 
     transform: translateY(-50%); width: 28px; height: 28px; padding: 5px; 
 
     margin: auto; color: #666; font-size: 150% 
 
    } 
 
    #expansion:hover { background: #222; color: #eee; cursor:pointer; } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="expansion">+</div> 
 
    <nav> 
 
    <ul> 
 
     <li><span>one</span> 
 
     </li> 
 
     <li><span>two</span> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <section id="description" class="removed"> 
 
    <h1>about web</h1> 
 
    <p> 
 
     WEB is a reference of... 
 
    </p> 
 
    </section> 
 
</body>

Answer 3

Sie können auch mit dem Hinzufügen oder Entfernen von Ereignis-Listenern in derselben Schaltfläche experimentieren, um verschiedene Dinge zu tun.

Ich bin kein Experte in JS, aber ich habe manchmal gesehen, wenn Ihr Javascript Klassen und Stile innerhalb der gleichen Funktion ändert, führt der Browser die Änderungen simultan mit einigen Ihrer Animationen durcheinander.

In diesem Beispiel unten verwende ich einen schmutzigen Trick, um den Code zu zwingen, eine Sache nach der anderen zu tun. Wenn Sie dies nicht tun, funktioniert die Überblendung nicht.

// To remove 
 
document.querySelector('.remove').addEventListener('click', remove); 
 

 
function remove() { 
 
    // Reconfig the button 
 
    var button = document.querySelector('.remove'); 
 
    button.removeEventListener('click', remove); 
 
    button.classList.remove('remove'); 
 
    button.classList.add('add'); 
 
    button.addEventListener('click', add); // New functionality added 
 
    // Now make your changes 
 
    var element = document.querySelector('.test'); 
 
    element.classList.add('fadeout'); 
 
    setTimeout(function() { 
 
    element.style.display = 'none'; 
 
    }, 500); 
 
} 
 

 
function add() { 
 
    var button = document.querySelector('.add'); 
 
    button.removeEventListener('click', add); 
 
    button.classList.remove('add'); 
 
    button.classList.add('remove'); 
 
    button.addEventListener('click', remove); 
 
    var element = document.querySelector('.test'); 
 
    element.style.display = 'inline-block'; 
 
    // Dirty trick incomming! 
 
    setTimeout(function() { // force the change of the class after the change of display 
 
    element.classList.remove('fadeout'); 
 
    }, 1); // do this after 1ms of the previews command 
 
}

.remove, 
 
.add { 
 
    cursor: pointer; 
 
} 
 
.test { 
 
    display: inline-block; 
 
    transition: all 0.5s; 
 
    background: blue; 
 
    color: white; 
 
    opacity: 1; 
 
} 
 
.fadeout { 
 
    opacity: 0; 
 
}

<div class="remove">Click to toggle element below</div> 
 
<div class="test">testing block</div>