javascript - 我如何将 css 转换添加到我的 Jquery 对话框？

Question

这是我打开和关闭对话框的脚本:

<script>
function open_dialog() {
    el = document.getElementById("dialog");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

这是我的对话框内容的html代码:

<div id="dialog">
    <p>Dialog content</p>
</div>

这是我的 CSS 代码:

#dialog {
    visibility: hidden;
    width: 560px;
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -280px;
    height: 300px;
    z-index: 999;
}

那么，我如何才能将过渡添加到我的对话框中呢？

Answer 1

我建议通过在元素上设置一个类来实现，而不是使用 JavaScript 更改它的 css 属性。

#dialog {
    /* visibility: hidden; Remove this */
    .......

    opacity: 0;
    -webkit-transition: 1000ms;
}

#dialog.show {
    opacity: 1;
}

不要忘记 transition 属性的其余浏览器前缀。看到这个 fiddle :http://jsfiddle.net/0wg0mz80/