[Javascript] Twitter Bootstrap模式:如何刪除幻燈片放下效果


Answers

引導程序使用的模式使用CSS3來提供效果,並且可以通過從模塊容器div中刪除適當的類來刪除它們:

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

正如你可以看到這個模式有一個.fade類,這意味著它被設置為淡入和.in ,這意味著它會滑入。所以,只要刪除與你想要刪除的效果相關的類,在你的情況下.in類。

編輯:只是跑了一些測試,它似乎並非如此, .in類是由JavaScript添加,雖然你可以修改他的幻燈片行為與CSS像這樣:

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

Demo

Question

有沒有辦法將Twitter Bootstrap Modal窗口動畫從幻燈片放下效果更改為淡入淡出或僅顯示沒有幻燈片? 我在這裡閱讀了文檔:

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

但是他們沒有提到改變模態體滑動效果的選擇。




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



我相信這些答案中的大部分都是bootstrap 2.我遇到了bootstrap 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找到以下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%




你也可以通過簡單的刪除“top:-25%;”來覆蓋bootstrap.css。

一旦刪除,模式將簡單地淡入和淡出幻燈片動畫。




我也不喜歡幻燈片效果。 要解決這個問題,你只需要對.modal.fade和modal.fade.in的top屬性進行修改。 你也可以在過渡階段取消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%;
}

如果你正在尋找引導3答案, 看看這裡




只需刪除淡入淡出類,並且如果您希望在Modal上執行更多動畫,則只需在模態中使用animate.css類即可。




問題很明顯: 刪除幻燈片:以下是如何在Bootstrap v3中對其進行更改

在modals.less評論翻譯聲明:

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