Wie man einen Übergang in Javascript hinzufügt document.getElementById ("myDIV"). Style.display = "none";

Question

Wie kann ich einen Übergang zu document.getElementById("myDIV").style.display = "none"; hinzufügen Ich arbeite derzeit an einem Registrierungsformular, in dem, wenn eine Eingabe einen bestimmten Wert hat das andere div ist ausgeblendet, aber es sieht so rauh aus, gibt es eine Möglichkeit, Übergänge in die folgenden JS hinzuzufügen?

<script type="text/javascript"> 
     function myFunction() { 
      document.getElementById("myDIV").style.display = "none"; 
     } 
     function hideshow(which){ 
      if (!document.getElementById) 
       return 
       if (which.style.display=="block") 
       which.style.display="block" 
       else 
        which.style.display="block" 
        } 


     function myFunction1() { 
      document.getElementById("myDIV2").style.display = "none"; 
     } 
    </script> 

Answer 1

erstellen Funktionen mit Parametern wie

function hideDiv(div_id) { 
     document.getElementById(div_id).style.display = "none"; 
} 

function showDiv(div_id) { 
     document.getElementById(div_id).style.display = "block"; 
} 

Answer 2

Die Art und Weise einen schönen Übergang zu machen ist style.display= "none"nach setzen Sie irgendeine Art von Animation durchführen, die das Element aus dem Blickfeld entfernt.

Sie könnten:

• Fade it out (set opacity-0 - verblassen sie mit transition in CSS)
• es Schieben nach oben/unten/links/rechts (Animation Bibliothek oder ausgefallene CSS)
• eine andere ausgefallenere Animation tun (wie bounce, schrumpfen usw.)

Dann, set style.display = "none"

Der einfachste Weg, dies zu tun (meiner Meinung nach) ist mit einer Animationsbibliothek. Ich persönlich empfehle VelocityJS, weil Sie jQuery nicht benötigen, um es auszuführen.

Answer 3

Ich glaube nicht, es trotzdem, dass mit einfachen js zu tun ist, aber ich habe es leicht JQuery mit

<script type="text/javascript"> 

    $(document).ready(function(){ 

$("#myDIV").show(); 

$(document).on('click', '.married' , function() { 

    if (this.value == "never_married"){    
     $("#myDIV").hide('slow');   
    } else { 
     $("#myDIV").show('slow');   
    }  
}) 

});

Answer 4

Der Grund ist display nicht animiert wird, ist es block-none Einstellung werden Sie nicht das Ergebnis geben Sie suchen.

Ein guter Weg, dies zu tun, ist CSS neben JavaScript für den Übergang zu verwenden.

Transition zu Ihrem myDIV Stil hinzufügen, wie:

#myDIV { 
    opacity: 1; 
    transition: 1s ease; 
} 

#myDIV.hidden { 
    opacity: 0; 
    transition: 1s ease; 
} 

Dann mit JavaScript gelten die hidden Klasse #myDiv und Sie werden Ihre Animation erhalten.
Sobald die Animation beendet ist, setzen Sie el.style.display = 'none';, damit sie vollständig aus der Ansicht verschwindet.