如何更改棘轮模态,使其从顶部向下滑动,仅占屏幕的50%而不是整个高度?
模态的css是;
.modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.modal.active {
height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(25%, 0, 0);
-ms-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
我一直在玩不同的价值但却无法得到我想要的价值。
答案 0 :(得分:1)
我很确定这很接近,但目前无法真正测试它。
transform: translate3d(0,-100%,0);
应该在屏幕顶部启动模式,transform: translate3d(0,50%,0);
应该在活动时将其移动到中间位置。然后明显的高度变为50%...
.modal.active {
height: 50%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0,50%,0);
-ms-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
.modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 50%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s,opacity 1ms .25s;
-moz-transition: -moz-transform .25s,opacity 1ms .25s;
transition: transform .25s,opacity 1ms .25s;
-webkit-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}