如何在Javascript中添加過渡document.getElementById（“ myDIV”）。style.display =“ none”;

Question

如何將過渡添加到document.getElementById("myDIV").style.display = "none"; 我目前正在處理一個注冊表單，如果一個輸入具有特定值，則另一個div會被隱藏，但看起來是如此粗糙，是否有辦法在以下JS中添加過渡？

 <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

用類似的參數創建函數

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

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

Answer 2

進行良好過渡的方法是在執行某種從視圖中刪除元素的動畫后 ，設置style.display= "none" 。

你可以：

• 淡入淡出（將opacity設置為0-在CSS中transition時淡入淡入）
• 向上/向下/向左/向右滑動（動畫庫或精美的CSS）
• 進行其他更高級的動畫處理（例如彈跳，縮小等）

然后 ，設置style.display = "none"

（我認為）最簡單的方法是使用動畫庫。 我個人推薦VelocityJS，因為您不需要jQuery來運行它。

Answer 3

我不認為使用簡單的js可以做到這一點，但是我使用JQuery輕松做到了

 <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

原因是display不是動畫的，將其從block設置為none將不會為您提供所需的結果。

一個很好的方法是將CSS與JavaScript一起使用進行過渡。

向您的myDIV樣式添加Transition ，例如：

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

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

然后使用JavaScript將hidden類應用於#myDiv ，您將獲得動畫。
一旦動畫完成，則設置el.style.display = 'none'; 使它從視圖中完全消失。