Question

所以我有一个我想要制作的对话窗口＆＃34; slide＆＃34;显示时从屏幕右侧进入。

这是对话框本身的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中，我有代码来确定＆＃34;对话框＆＃34;是空的......如果它不是空的，那么＆＃34;对话框打开＆＃34; class被添加到body中，这将启用＆＃34;对话框＆＃34;通过＆＃34;显示：块＆＃34;显示属性。

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

我的问题是我希望该对话框从右侧滑入，而不仅仅是＆＃34; show＆＃34; - 不确定我做错了什么......任何帮助都会受到赞赏。

Answer 1

而不是display: none/block;使用visibility: hidden/visible;

无法为显示属性设置动画，因此您看不到转换的原因。

Answer 2

从display: none移除.dialog。对于display:block

，您分别不需要body.dialog-open .dialog

.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：Example

.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);
}

css3过渡不起作用？

2 个答案:

JSFiddle：Example