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，我有代码来确定是否"对话框"是空的…如果它不为空，则在body中添加一个"dialog-open"类，使"dialog"能够通过"display:block"属性显示。

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

我的问题是，我希望这个对话框从右边滑进来，而不仅仅是"显示"-不知道我做错了什么....

Answer 1

用visibility: hidden/visible;代替display: none/block;

display属性不能被动画化，因此你看不到你的过渡。

Answer 2

从.dialog中移除display: none。而body.dialog-open .dialog则不需要display:block

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    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;
}
body.dialog-open .dialog {
    right: 0;
}

一个建议，而不是过渡左/右/上/下定位，你会想要使用CSS变换和translateX/translateY，因为它们是GPU加速。使用gpu加速的CSS将允许更好的性能和更平滑的过渡/动画。下面是一个工作示例和代码:

JSFiddle:例子

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 70px 10% 160px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    width: 90%;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -webkit-transform: translateX(150%);
    -moz-transform: translateX(150%);
    -o-transform: translateX(150%);
    transform: translateX(150%);
    z-index: 9;
}
body.dialog-open .dialog {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}