2012-05-04 28 views
21

Tôi đang sử dụng trình khởi động twitter và mờ dần cho việc đóng hộp cảnh báo diễn ra nhanh hơn tôi muốn. Có nơi nào đó tôi có thể thay đổi thời gian mờ dần hoặc thậm chí có thể đặt nó trên cơ sở theo từng cảnh báo không?Làm cách nào để thay đổi tốc độ mờ dần cho các thông điệp cảnh báo trong Twitter Bootstrap?

Cảm ơn

+0

Bạn đã xem bootstrap-transition.js chưa? http://twitter.github.com/bootstrap/javascript.html#tooltips – AlexMA

Trả lời

26

Dan Herman,

Nếu bạn không sử dụng ít hơn và bạn cảm thấy như chỉnh sửa bootstrap.css bạn có thể thử và sửa lỗi này và không để lộn xộn xung quanh với các tập tin .js.

Sửa

.fade { 
    opacity: 0; 
    -webkit-transition: opacity 0.25s linear; 
     -moz-transition: opacity 0.25s linear; 
     -ms-transition: opacity 0.25s linear; 
     -o-transition: opacity 0.25s linear; 
      transition: opacity 0.25s linear; 
} 

và làm cho nó vào ...

.fade { 
    opacity: 0; 
    -webkit-transition: opacity 1.25s linear; 
     -moz-transition: opacity 1.25s linear; 
     -ms-transition: opacity 1.25s linear; 
     -o-transition: opacity 1.25s linear; 
      transition: opacity 1.25s linear; 
} 

1.25s không phải là giá trị mặc định, đó là chỉ là một ví dụ và nếu bạn áp dụng điều đó, bạn sẽ thực sự nhận thấy hiệu quả và sự khác biệt.

Bây giờ, nếu bạn muốn tạo biến thể khác của công cụ chọn mờ, hãy nói "myFade", sau đó tôi nghĩ bạn cần sửa đổi bootstrap-alert.js và thêm bộ chọn lớp mới hoặc bộ chọn lớp "myFade" của bạn .

Tôi chưa biết về javascript. Tôi chỉ nghĩ rằng bạn cần phải sửa đổi bootstrap-alert.js và chèn lớp mới của bạn.

+0

.35 Tôi tìm thấy là giá trị tốt nhất để sử dụng nếu bạn muốn có thể nhấp vào các tab một cách nhanh chóng. – RolandiXor

4

Nó thực sự sử dụng .transition(opacity .15s linear); trong thành phần animations.less (dòng 5).

Nếu bạn nhìn vào dòng 64 của bootstrap-alert.js bạn có thể thấy nó tham chiếu đến lớp ở đâu. Thay đổi .15s cho những gì bạn muốn nó được và bạn nên được tốt để đi.

+0

Cảm ơn, đây là tệp tôi đang tìm kiếm. '_component-animations.scss' trong trường hợp của tôi. –

Các vấn đề liên quan