是否可以从侧面或底部制作Twitter Bootstrap模式幻灯片，而不是向下滑动？ [英] Is it possible to make a Twitter Bootstrap modal slide from the side or bottom instead of sliding down?

问题描述

目前，模式下滑效果是通过向模态div添加 fade 类来实现的。是否可以通过更改css来更改从侧面（或从底部）滑动的效果？我在网上找不到任何关于如何做到这一点的信息，并且不知道足够的CSS自己这样做。

html：

 < div id ='test-modal'class ='modal fade hide'> 
< div> Stuff< / div> 
< / div> Bootstrap 3现在使用CSS变换translate3d而不是CSS转换来使用CSS转换使用GPU硬件加速更好的动画。 
 
 
 
它使用以下CSS（sans easing）
  .modal .fade .modal-dialog {
 -webkit-transform：translate3d（0，-25％，0）; 
 transform：translate3d（0，-25％，0）; 
} 
  
这里是可以用来从左侧滑入的CSS 
  .modal.fade：not（.in）.modal-dialog {
 -webkit-transform：translate3d（-25％ ，0,0）; 
 transform：translate3d（-25％，0，0）; 
} 
  
请注意负选择器。我注意到这是必要的，以保持.modal.in .modal对话框定义干扰。 注意：我不是CSS大师，所以如果任何人可以更好地解释这一点，请随意：）
 
 
 
如何从不同的边：
 
 
 
 
 
 top： translate3d（0，-25％，0） li> 
 
 bottom： translate3d（0，25％，0） 
 
 
 left： translate3d（-25％，0，0） 
 
 
 right： translate3d（25％，0，0） c $ c> 
 
 
 
 
 
 
 
 
如果您想混合搭配不同的投影片方向可以为模态分配类left。
 < div class =modal fade left> 
 ... 
< / div> 
  
 ...然后专门使用CSS定位：
  .modal.fade：not（.in）.left .modal-dialog {
 -webkit-transform：translate3d（-25％，0，0） ; 
 transform：translate3d（-25％，0，0）; 
} 
  
 
 
 
小提琴：http://jsfiddle.net/daverogers/mu5mvba0/  
 
 
 
 奖金  - 您可以得到一点zany并以一个角度滑动：
 
 
 
 
 
左上角： translate3d（-25％，-25％ 0） 
 
 
右上角： translate3d（25％，-25％，0） li> 
 
左下角： translate3d（-25％，25％，0） 
 
 
右侧： translate3d（25％，25％，0） 
 
 
 
 
 
  > UPDATE（05/28/15）：我更新了小提琴以显示替代角度
 
 
 
 
 
 
你想在LESS模板中使用这个，你可以使用BS3的供应商前缀mixin（只要它包括）
 。 modal.fade：not（.in）.modal-dialog {
 .translate3d（-25％，0，0）; 
} 
  
 
Currently the modal slide down effect is done by adding the fade class to the modal div. Is it possible to change the effect to sliding from the side (or from the bottom) by changing the css?  I couldn't find any information online on how to do this and don't know enough css to do this myself.

html:
<div id='test-modal' class='modal fade hide'>
  <div>Stuff</div>
</div>

解决方案
Bootstrap 3 now uses CSS transform translate3d instead of CSS transitions for better animations using GPU hardware acceleration. 

It uses the following CSS (sans easing)
.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}
Here is CSS you can use to slide in from the LEFT side
.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}
Notice the negative selector. I noticed this was necessary to keep the ".modal.in .modal-dialog" definition from interfering. Note: I am not a CSS guru, so if anyone can better explain this, feel free :)

How to slide in from different sides:


top: translate3d(0, -25%, 0)
bottom: translate3d(0, 25%, 0)
left: translate3d(-25%, 0, 0)
right: translate3d(25%, 0, 0)




If you want to mix and match different slide directions, you can assign a class like 'left' to the modal...
<div class="modal fade left">
    ...
</div>
...and then target that specifically with CSS:
.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}


Fiddle: http://jsfiddle.net/daverogers/mu5mvba0/

BONUS - You could get a little zany and slide in at an angle:


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): I updated the fiddle to display the alternative angles



If you want to use this in a LESS template, you can use BS3's vendor-prefix mixin (as long as it's included)
.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}


                        
这篇关于是否可以从侧面或底部制作Twitter Bootstrap模式幻灯片，而不是向下滑动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！