CSS 是否可以从侧面或底部制作 Twitter Bootstrap 模态幻灯片而不是向下滑动？

Question

提问by perseverance

Currently the modal slide down effect is done by adding the fadeclass 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.

目前，模态向下滑动效果是通过将fade类添加到模态 div 来完成的。是否可以通过更改css将效果更改为从侧面（或从底部）滑动？我在网上找不到任何有关如何执行此操作的信息，并且我自己也不知道足够的 css 来执行此操作。

html:

html：

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

Answer 1

回答by dave

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

Bootstrap 3 现在使用 CSS 变换 translate3d 代替 CSS 过渡，以使用 GPU 硬件加速实现更好的动画效果。

It uses the following CSS (sans easing)

它使用以下 CSS（无缓动）

.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

这是您可以用来从左侧滑入的 CSS

.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 :)

注意否定选择器。我注意到这对于保持“.modal.in .modal-dialog”定义不受干扰是必要的。注意：我不是 CSS 大师，所以如果有人能更好地解释这一点，请随意:)

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)

最佳： translate3d(0, -25%, 0)
底部： translate3d(0, 25%, 0)
剩下： translate3d(-25%, 0, 0)
对： 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:

...然后专门用 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/

小提琴：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)

左上方： translate3d(-25%, -25%, 0)
右上： translate3d(25%, -25%, 0)
左下方： translate3d(-25%, 25%, 0)
右下角： translate3d(25%, 25%, 0)

UPDATE (05/28/15): I updated the fiddle to display the alternative angles

更新 (05/28/15)：我更新了小提琴以显示替代角度

If you want to use this in a LESS template, you can use BS3's vendor-prefix mixin (as long as it's included)

如果你想在 LESS 模板中使用它，你可以使用 BS3 的供应商前缀混合（只要它被包含）

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}

Answer 2

回答by rosshamish

This information is outdated. Bootstrap 3 handles this differently now. Please see the updated answerif you are using the newer version.

此信息已过时。Bootstrap 3 现在以不同的方式处理这个问题。如果您使用的是较新版本，请查看更新的答案。

The "slide-in" transition is in fact handled by the bootstrap css. In particular, it is handled by this part:

“slide-in”转换实际上是由 bootstrap css 处理的。特别是由这部分处理：

// bootstrap.css

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

To change the transition direction, just add (in your ownstylesheet, because the bootstrap css will be updated in future versions) these styles. These will overwrite the bootstrap styles. To have the modal slide in from the left, try:

要更改过渡方向，只需添加（在您自己的样式表中，因为引导 css 将在未来版本中更新）这些样式。这些将覆盖引导程序样式。要从左侧滑入模态，请尝试：

.modal.fade {
  left: -25%;
  -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.fade.in {
  left: 50%;
}?

Working jsfiddle here.

在这里工作 jsfiddle 。

To transition from the right to left, supply a large positivepercentage for the modal to transition from, and change the modal's final resting place to the respective direction. e.g. .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

要从右向左过渡，请为模态过渡提供一个较大的正百分比，并将模态的最终静止位置更改为相应的方向。例如.modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Right to left example.

从右到左的例子。

Bottom to top example.

从下到上的例子。

More info on CSS Transitions here.

更多关于CSS Transitions 的信息在这里。

Answer 3

回答by Syed

This is for someone who is looking for Bootstrap 4solution:

这适用于正在寻找Bootstrap 4解决方案的人：

HTML

<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneRight">Slide Right Panel</a>

<div class="modal fade modal-right-pane" id="modalSidePaneRight" tabindex="-1" role="dialog" aria-labelledby="sidePaneRightModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h5 class="modal-title" id="sidePaneRightModal"><i class="fi fi-calender"></i> Your Modal Title</h5>
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body bg-primary">
        <h1>Your Content</h1>
      </div>
    </div>
  </div>
</div>

SCSS

社会保障局

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
*******************************/

// Modal Panel: Right
$header-nav-height: 56px;
$modal-height: calc(100vh - #{$header-nav-height});

.modal{
  &.modal-left-pane,
  &.modal-right-pane {
    .modal-dialog {
      max-width: 380px;
      min-height: $modal-height;
    }

    &.show .modal-dialog {
      transform: translate(0, 0);
    }

    .modal-content {
      min-height: $modal-height;
    }
  }
  &.modal-left-pane {
    .modal-dialog {
      transform: translate(-100%, 0);
      margin: $header-nav-height auto 0 0;
    }
  }

  &.modal-right-pane {
    .modal-dialog {
      transform: translate(100%, 0);
      margin: $header-nav-height 0 0 auto;
    }
  }
}

CSS 是否可以从侧面或底部制作 Twitter Bootstrap 模态幻灯片而不是向下滑动？

提问by perseverance

回答by dave

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

小提琴：http: //jsfiddle.net/daverogers/mu5mvba0/

回答by rosshamish

回答by Syed

相关推荐

最近更新

标签

CSS 是否可以从侧面或底部制作 Twitter Bootstrap 模态幻灯片而不是向下滑动？

提问by perseverance

回答by dave

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

小提琴：http: //jsfiddle.net/daverogers/mu5mvba0/

回答by rosshamish

回答by Syed

相关推荐

CSS 自定义 li 列表样式，带有字体很棒的图标

使用 CSS text-overflow 来改变设置高度的元素内的文本行数

CSS SCSS 支持内联注释吗？

CSS 中的禁用按钮？

相关推荐

最近更新

标签