![](/img/trans.png)
[英]How to animate my header to slide in horizontally from left to page view on load?
[英]How do I get my modal to slide in horizontally from the left?
当我喂食
Modal.show("experimentMakeAnOffer");
在 Chrome 浏览器控制台中,我的模式从左侧斜向滑动。 如何让我的模态从左侧水平(直线)滑入?
我曾尝试研究如何使用 CSS 调平模态(隐藏时/被调用之前),但没有运气。 任何帮助表示赞赏。
在模板中的模态下方:
<template name="experimentMakeAnOffer">
<div class="modal fade left" id= "experimentMakeAnOffer2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">experimentMakeAnOffer </h4> </div>
<div class="modal-body experimentMakeAnOffer">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submitOffer btn-lg" data-dismiss="modal">Offer</button>
</div>
</div>
</div>
</div>
我的CSS:
.modal.fade:not(.in).left .modal-dialog {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
您好,请检查下面更新的 Fiddle,我在其中更改了您的代码并以另一种方式展示了它希望它对您有所帮助。
.modal.left .modal-dialog
{
position: fixed;
margin: auto;
width: 500px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content
{
margin-top:40%;
height: 50%;
width:100%;
overflow-y: auto;
}
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}
translate3d
属性接受 (X, Y, Z, angle) 属性。
在您的 CSS 上,该语句不一致,因为首先您在-webkit-transform
上将 Y 设置为 20%,然后在transform
上将其设置为 0%,浏览器只会获得最后一个有效参数,例如在 Chrome 上.model-dialog
将在 Y 上呈现 0。
但是关于从左侧显示的问题,您需要更改翻译的 X 位置而不是 Y 位置。
检查这个小提琴以获得快速演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.