如何在顯示/隱藏中使用轉換

我在javascript（show/hide div）中編寫了代碼。現在我想在CSS中使用屬性「過渡」，但它不起作用。如何在顯示/隱藏中使用轉換

的JavaScript在HEAD：

function show() 
{ 
    document.getElementById('add-contact').style.display=\"block\"; 
    document.getElementById('add-contact-button').style.display=\"none\"; 
} 
</script>

股利增加接觸和添加聯繫人按鈕：

<span id=\"add-contact-button\" href=\"/kontakty#\" onclick=\"javascript:show()\">Dodaj kontakt</span> 
    <form action=\"kontakty/dodaj\" method=\"post\" id=\"add-contact\" > 
    ... 
    </form>

部分CSS：

form#add-contact { 
    float: right; 
    width: 223px; 
    height: auto; 
    line-height: 27px; 
    display: none; 
    transition: height 500ms linear; 
}

來源

2013-02-05 giertych97

你爲什麼逃避引號？ –

我有這個代碼在回聲（）。 – giertych97

只有'height'屬性發生變化時纔會起作用，而不是在設置'display'時。 – Bergi

我看到了兩個主要問題：

您不能轉換display屬性。你必須把它從開始塊，並且只是opacity: 0
隱藏它，你需要使用-webkit供應商名稱，使其在Chrome和Safari工作。

看到這裏工作演示：http://codepen.io/anon/pen/hwayD

來源

2013-02-05 18:12:29 bfavaretto

如何在顯示/隱藏中使用轉換

回答

相關問題