Twitter Bootstrap模态:如何消除滑倒效应

2020/10/24 18:21 · javascript ·  · 0评论

有没有一种方法可以将Twitter Bootstrap Modal窗口动画从下滑效果更改为fadeIn或仅在不显示幻灯片的情况下显示?我在这里阅读了文档:

http://getbootstrap.com/javascript/#modals

但是他们没有提到任何更改模态车身滑动效果的选项。

只需fade从模式div中删除该类。

具体来说,更改:

<div class="modal fade hide">

至:

<div class="modal hide">

更新:对于bootstrap3,hide不需要该类。

引导程序使用的模态使用CSS3提供效果,可以通过从模态容器div中消除适当的类来删除它们:

<div class="modal hide fade in" id="myModal">
   ....
</div>

如您所见,此模态具有的类.fade,表示将其设置为淡入和.in,表示将其滑入。因此,只需删除与要删除的效果相关的类,在您的情况下就是.in该类。

编辑:只是运行了一些测试,似乎不是这样,.in该类是由javascript添加的,尽管您可以使用CSS修改他slideDown的行为,如下所示:

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

演示版

如果您希望模式淡入而不是滑入(为什么.fade仍要调用它?),则可以覆盖CSS文件中的类,或直接bootstrap.css使用以下方法覆盖

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

如果您不希望有任何效果,只需fade从模态类中删除该类。

我相信这些答案大多数都是针对引导程序2的。我遇到了针对引导程序3的同一问题,并希望分享我的修正。就像我之前对bootstrap 2的回答一样,这仍然会导致不透明度消失,但不会进行幻灯片过渡。

您可以更改modals.less或theme.css文件,具体取决于您的工作流程。如果您没有花更少的时间在优质的时间上,我强烈推荐您。

少一些,在下面找到以下代码 MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

然后更改-25%0%

另外,如果仅使用CSS,请在中找到以下内容theme.css

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

然后将更-25%改为0%

我通过.modal.fade在我自己的LESS样式表中覆盖默认样式来解决此问题

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

这将保持淡入/淡出动画,但会删除向上/向下滑动动画。

我找到了删除幻灯片但留下淡入淡出的最佳解决方案,是在选择的css文件中添加以下css,该文件在bootstrap.css之后调用

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

我也不喜欢滑动效果。要解决此top问题,只需将.modal.fade和modal.fade.in属性设置为相同即可。您也可以top 0.3s ease-out在过渡中将其移除,但将其保留下来也不会有任何伤害。我喜欢这种方法,因为淡入/淡出效果很好,它只会杀死幻灯片

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

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

如果您正在寻找bootstrap 3的答案,请看这里

您还可以通过简单地删除“ top:-25%;”来覆盖bootstrap.css。

一旦删除,模态将简单地淡入和淡出,而无需幻灯片动画。

只需删除衰落类,如果您想在Modal上执行更多的动画,只需在Modal中使用animate.css类即可。

我正在使用bootstrap 3和Durandal JS 2模态插件。这个问题是Google搜索结果的重中之重,并且由于上述答案都无法解决我的问题,因此我想与其他访问者分享我的解决方案。

我用我自己的less覆盖了默认的Bootstrap的Less代码:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

这样,我只剩下淡入淡出效果,而没有slideDown。

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

问题很明确:删除幻灯片:以下是如何在Bootstrap v3中进行更改

在modals.less中注释掉translate语句:

&.fade .modal-dialog {
  //   .translate(0, -25%);

看看http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

想要更新此。你们大多数人还没有完成此问题。我正在使用Bootstrap3。以上修复程序均无效。

删除幻灯片效果,但保持淡入效果。我进入了bootstrap css,并(注意以下选择器)-这解决了该问题。

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}

以下CSS对我有用-使用Bootstrap3。您需要在boostrap样式之后添加此CSS-

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

只需从模态类中删除“ fade”类

class="modal fade bs-example-modal-lg"

class="modal bs-example-modal-lg"
本文地址:http://javascript.askforanswer.com/twitter-bootstrapmotairuhexiaochuhuadaoxiaoying.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!