css – 有可能使一个Twitter Bootstrap模式幻灯片从侧面或底部,而不是向下滑动?

前端之家收集整理的这篇文章主要介绍了css – 有可能使一个Twitter Bootstrap模式幻灯片从侧面或底部,而不是向下滑动?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前模式下滑效果是通过将衰落类添加到模态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);
}

猜你在找的CSS相关文章