twitter bootstrap của băng chuyền chuyển

Question

phai đây là một câu hỏi tiếp theo liên quan đến một câu trả lời bằng cách @StrangeElement cho câu hỏi cũ này: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

tôi đã cố gắng @ mod StrangeElement để các bootstrap.css và tôi gần như có nó làm việc. vấn đề là khi hình ảnh hoạt động mờ đi, nó mờ dần thành màu trắng, sau đó hình ảnh tiếp theo sẽ bật lên mà không bị mờ dần trong hoạt ảnh. những gì tôi có thể bị thiếu ở đây?

đây là ví dụ tôi đang làm việc với:

http://planetofsoundonline.com/beta/index.php

bất kỳ loại con trỏ sẽ được vô cùng đánh giá cao. cảm ơn!

Answer 1

Chụp look at this fiddle. Rất tiếc, nó không hoạt động trên bất kỳ phiên bản Internet Explorer hiện có nào.

Băng chuyền của bạn div chỉ cần thêm một lớp học carousel-fade được thêm vào, để nó hoạt động.

[source]

Sự chuyển đổi này cho thấy hình ảnh tiếp theo và sau đó mất dần hình ảnh mới trên đầu trang của nó. Nếu bạn muốn một fade trực tiếp mờ dần trong hoạt hình, thêm những dòng này vào css.

.carousel.carousel-fade .item { 
    opacity:0; 
} 

.carousel.carousel-fade .active.item { 
    opacity:1; 
} 

Answer 2

gì về việc thêm:

filter: alpha(opacity=100); /* ie fix */ 

Hệ quả là:

.carousel.carousel-fade .item { 
    opacity:0; 
    filter: alpha(opacity=0); /* ie fix */ 
} 

.carousel.carousel-fade .active.item { 
    opacity:1; 
    filter: alpha(opacity=100); /* ie fix */ 
} 

Answer 3

tôi thành công thay đổi băng chuyền để mờ dần hình ảnh thay vì trượt. Và tôi cũng chia tỷ lệ hình ảnh qua CSS để chúng phản hồi:

img.carousel-img { 
    max-width:1900px; 
    width:100%; 
} 

Thật không may trên trình duyệt Webkit, trong khi hoạt ảnh mờ dần hoạt động, mỗi hình ảnh được phóng to với kích thước ban đầu. Và ngay sau khi mỗi hoạt ảnh kết thúc, hình ảnh sẽ được thu nhỏ lại theo quy tắc CSS ở trên (ngay lập tức, không hoạt ảnh). Tất nhiên hình ảnh động trông nghiệp dư & nói lắp theo cách này. Vì vậy, tôi đã thêm

-webkit-transform: translate3d(0,0,0); 

vào quy tắc chuyển đổi mờ dần của băng chuyền và hoạt ảnh hoạt động như một nét duyên dáng kể từ đó. Vì vậy, các quy tắc trông giống như:

.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    -webkit-transition-property: opacity; 
    -moz-transition-property: opacity; 
    -o-transition-property: opacity; 
    transition-property: opacity; 
    -webkit-transform: translate3d(0,0,0); /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */ 
} 

Ở đây tôi tìm thấy giải pháp này: Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios/ipad 5.1?

Answer 4

Hy vọng rằng sẽ giúp người tiếp theo. Tôi muốn Scale và Fade.

Thực sự không cần thêm lớp bổ sung. Bootstrap 3.3.6

Fade và Scale (mất trái/phải mũi tên xem xét)

/* Carousel Scale and Fade */ 

/* Carousel Fade */ 
.carousel .item { 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
} 
.carousel .active.left, .carousel .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 2; 
} 
.carousel .next, .carousel .prev { 
    left: 0; 
    opacity: 1; 
    z-index: 1; 
} 

/* Carousel Scale */ 
.carousel .item.active { 
    animation: zoom 30s; 
    -moz-animation: zoom 30s; 
    -webkit-animation: zoom 30s; 
    -o-animation: zoom 30s; 
} 
@keyframes zoom { 
    from {transform:scale(1);} 
    to {transform:scale(2);} 
} 
@-moz-keyframes zoom { 
    from {-moz-transform:scale(1);} 
    to {-moz-transform:scale(2);} 
} 
@-webkit-keyframes zoom { 
    from {-webkit-transform:scale(1);} 
    to {-webkit-transform:scale(2);} 
} 
@-o-keyframes zoom { 
    from {-o-transform:scale(1);} 
    to {-o-transform:scale(2);} 
}