目前模式下滑效果是通过将衰落类添加到模态div来完成的。是否可以通过更改css来更改从侧面(或从底部)滑动的效果?我没有找到任何信息在线如何做到这一点,并不知道足够的CSS自己这样做。
html:
<div id='test-modal' class='modal fade hide'> <div>Stuff</div> </div>
解决方法
Bootstrap 3现在使用CSS变换translate3d而不是CSS转换,以使用GPU硬件加速更好的动画。
它使用以下CSS(sans easing)
.modal.fade .modal-dialog { -webkit-transform: translate3d(0,-25%,0); transform: translate3d(0,0); }
这里是您可以使用从左侧滑入的CSS
.modal.fade:not(.in) .modal-dialog { -webkit-transform: translate3d(-25%,0); transform: translate3d(-25%,0); }
注意负选择器。我注意到这是必要的,以保持“.modal.in .modal对话框”定义干扰。注意:我不是CSS古茹,所以如果任何人都可以更好地解释这一点,随意:)
如何从不同的边滑入:
> top:translate3d(0,-25%,0)
> bottom:translate3d(0,25%,0)
> left:translate3d(-25%,0,0)
> right:translate3d(25%,0,0)
如果你想混合和匹配不同的幻灯片方向,你可以分配类似’left’到模态…
<div class="modal fade left"> ... </div>
…然后具体使用CSS的目标:
.modal.fade:not(.in).left .modal-dialog { -webkit-transform: translate3d(-25%,0); }
小提琴:http://jsfiddle.net/daverogers/mu5mvba0/
奖金 – 你可以得到一点点滑稽,滑入一个角度:
> top-left:translate3d(-25%,-25%,0)
> top-right:translate3d(25%,-25%,0)
> bottom-left:translate3d(-25%,25%,0)
> bottom-right:translate3d(25%,25%,0)
UPDATE(05/28/15):我更新了小提琴来显示替代角度
如果你想在LESS模板中使用它,你可以使用BS3的vendor-prefix mixin(只要它包含)
.modal.fade:not(.in) .modal-dialog { .translate3d(-25%,0); }