Phương thức Twitter Bootstrap: Cách xóa hiệu ứng Trượt xuống

Có cách nào để thay đổi hoạt hình cửa sổ Twitter Bootstrap Modal từ hiệu ứng trượt xuống thành fadeIn hoặc chỉ hiển thị mà không có Slide? Tôi đọc qua các tài liệu ở đây:

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

Nhưng họ không đề cập đến bất kỳ tùy chọn nào để thay đổi hiệu ứng trượt cơ thể phương thức.

Chỉ cần lấy ra fadelớp từ div phương thức.

Cụ thể, thay đổi:

<div class="modal fade hide">

đến:

<div class="modal hide">

CẬP NHẬT: Đối với bootstrap3, hidelớp không cần thiết.

Các mô-đun được sử dụng bởi bootstrap sử dụng CSS3 để cung cấp các hiệu ứng và chúng có thể được loại bỏ bằng cách loại bỏ các lớp thích hợp khỏi mod mod container div:

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

Như bạn có thể thấy phương thức này có một lớp .fade, có nghĩa là nó được đặt thành mờ dần và .incó nghĩa là nó sẽ trượt vào. Vì vậy, chỉ cần loại bỏ lớp liên quan đến hiệu ứng bạn muốn loại bỏ, trong trường hợp của bạn chỉ là .inlớp.

Chỉnh sửa: Chỉ cần chạy một số thử nghiệm và có vẻ như không phải vậy, .inlớp được thêm bằng javascript, mặc dù bạn có thể sửa đổi hành vi slideDown của anh ấy bằng css như vậy:

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

Bản giới thiệu

Nếu bạn muốn có chế độ mờ dần theo phương thức thay vì trượt vào (tại sao nó vẫn được gọi là .fade?), Bạn có thể ghi đè lớp trong tệp CSS của mình hoặc trực tiếp bootstrap.cssbằng cách này:

.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%;
}

Nếu bạn không muốn bất kỳ hiệu ứng nào, chỉ cần loại bỏ fadelớp khỏi các lớp phương thức.

Tôi tin rằng hầu hết các câu trả lời này là dành cho bootstrap 2. Tôi gặp vấn đề tương tự với bootstrap 3 và muốn chia sẻ cách khắc phục của mình. Giống như câu trả lời trước đây của tôi cho bootstrap 2, điều này vẫn sẽ làm mờ dần độ mờ, nhưng sẽ KHÔNG thực hiện chuyển đổi slide.

Bạn có thể thay đổi các tệp modals.less hoặc theme.css, tùy thuộc vào quy trình làm việc của bạn. Nếu bạn chưa dành thời gian chất lượng với ít hơn, tôi thực sự khuyên bạn nên dùng nó.

để biết ít hơn, hãy tìm đoạn mã sau trong MODALS.less

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

sau đó thay đổi -25%thành0%

Ngoài ra, nếu bạn chỉ sử dụng css, hãy tìm thông tin sau 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;
}

và sau đó thay đổi -25%thành 0%.

Tôi đã giải quyết điều này bằng cách ghi đè các .modal.fadekiểu mặc định trong biểu định kiểu LESS của riêng tôi:

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

Điều này giữ hiệu ứng mờ dần trong / mờ dần nhưng loại bỏ hoạt hình trượt lên / trượt xuống.

Tôi đã tìm ra giải pháp tốt nhất để loại bỏ slide nhưng để lại sự mờ dần bằng cách thêm css sau vào tệp css mà bạn chọn được gọi sau 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;
}

Tôi cũng không thích hiệu ứng trượt. Để khắc phục điều này, tất cả những gì bạn phải làm là làm cho topthuộc tính giống nhau cho cả .modal.fade và modal.fade.in. Bạn cũng có thể tắt các top 0.3s ease-outhiệu ứng chuyển tiếp, nhưng sẽ không hại gì khi để nó vào. Tôi thích cách tiếp cận này bởi vì hiệu ứng mờ dần trong / ngoài hoạt động, nó chỉ giết chết slide .

.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%;
}

Nếu bạn đang tìm kiếm một câu trả lời bootstrap 3, hãy nhìn vào đây

bạn cũng có thể ghi đè bootstrap.css bằng cách xóa "top: -25%;"

một khi được gỡ bỏ, phương thức sẽ đơn giản mờ dần trong và ngoài mà không có hình ảnh động trượt.

Chỉ cần xóa lớp fade và nếu bạn muốn có nhiều hình ảnh động được thực hiện trên Modal, chỉ cần sử dụng các lớp animate.css trong Modal của bạn.

Tôi đang làm việc với bootstrap 3 và plugin modal Durandal JS 2. Câu hỏi này nằm trên kết quả của Google và vì không có câu trả lời nào ở trên phù hợp với tôi nên tôi nghĩ tôi sẽ chia sẻ giải pháp của mình cho khách truy cập trong tương lai.

Tôi ghi đè mã Ít hơn của Bootstrap mặc định bằng mã này của riêng tôi:

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

Bằng cách đó, tôi chỉ còn lại hiệu ứng mờ dần và không có slideDown.

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

Câu hỏi rất rõ ràng: chỉ xóa slide: Đây là cách thay đổi nó trong Bootstrap v3

Trong modals.less bình luận ra câu dịch:

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

nhìn vào 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;
}

Muốn cập nhật cái này. Hầu hết các bạn chưa hoàn thành vấn đề này. Tôi đang sử dụng Bootstrap 3. không có bản sửa lỗi nào ở trên hoạt động.

để loại bỏ hiệu ứng trượt nhưng giữ mờ dần. Tôi đã đi vào bootstrap css và (lưu ý các bộ chọn sau) - điều này đã giải quyết vấn đề.

 .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 sau đây hoạt động với tôi - Sử dụng Bootstrap 3. Bạn cần thêm css này sau các kiểu boostrap -

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

.modal.fade {
   transition: none; 
}

chỉ cần loại bỏ lớp 'fade' khỏi lớp phương thức

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

như

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