jquery - css3 过渡不起作用？

Question

所以我有一个对话框窗口，我试图在它显示时从屏幕右侧“滑入”。

这是对话框本身的 CSS:

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    padding: 70px 10% 160px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    width: 90%;
    right: -100%;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: right;
    -moz-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
    z-index: 9;
}

在我的 JavaScript 中，我有代码确定“对话框”是否为空...如果它不为空，则会将“dialog-open”类添加到主体中，从而使“对话框”能够显示通过“display:block”属性。

body.dialog-open .dialog {
    display: block;
    right: 0;
}

我的问题是，我希望该对话框从右侧滑入，而不仅仅是“显示” - 不确定我做错了什么......任何帮助将不胜感激。

Answer 1

不要使用 display: none/block; 使用 visibility: hide/visible;

显示属性无法设置动画，因此您看不到过渡。