चहचहाना बूटस्ट्रैप के हिंडोला फीका संक्रमण

Question

इस एक अनुवर्ती इस पुराने सवाल का @StrangeElement द्वारा एक जवाब के बारे में सवाल यह है: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

मैं bootstrap.css लिए @ StrangeElement के आधुनिक करने की कोशिश की और मैं लगभग यह काम कर रहा है। समस्या यह है कि जब सक्रिय छवि फीका हो जाती है, तो यह सफेद हो जाती है, तो अगली छवि एनीमेशन में कोई फीका नहीं होगा। मैं यहाँ क्या खो सकता हूँ?

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

संकेत दिए गए किसी भी तरह का बेहद सराहना की जाएगी:

यहाँ उदाहरण मैं के साथ काम कर रहा हूँ है। धन्यवाद!

Answer 1

look at this fiddle लें। दुर्भाग्यवश यह इंटरनेट एक्सप्लोरर के वर्तमान में उपलब्ध संस्करणों में से किसी एक पर काम नहीं करता है।

आपके कैरोसेल div को काम करने के लिए केवल अतिरिक्त कक्षा carousel-fade जोड़ा गया है।

[source]

इस संक्रमण अगली छवि से पता चलता है और फिर इसे के शीर्ष पर नई छवि फ़ेड आउट। यदि आप एनीमेशन में सीधे फीका फीका चाहते हैं, तो इन लाइनों को सीएसएस में जोड़ें।

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

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

Answer 2

क्या जोड़ने के बारे में:

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

में परिणामी:

.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

मैं सफलतापूर्वक छवियों fading के बजाय उन्हें रपट को हिंडोला बदल दिया है।

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

वेबकिट-ब्राउज़रों पर दुर्भाग्य से, जबकि fading-एनीमेशन सक्रिय था, हर छवि अपने मूल आकार को बढ़ाया गया था: और मैं भी सीएसएस के माध्यम से छवियों ताकि वे जिम्मेदार हैं बढ़ाए गए हैं। और प्रत्येक एनीमेशन समाप्त होने के तुरंत बाद, छवि को उपरोक्त सीएसएस-नियम के अनुसार फिर से सही किया जाएगा (तुरंत, एनिमेटेड नहीं)। बेशक एनीमेशन शौकिया & इस तरह से stuttering देखा। इसलिए मैं carousel's fading-संक्रमण-शासन के लिए

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

जोड़ा गया है और एनीमेशन तब से एक आकर्षण की तरह काम करता है। Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios/ipad 5.1?

Answer 4

उम्मीद है कि अगले व्यक्ति में मदद करता है:

.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 */ 
} 

यहाँ मैं इस समाधान पाया: तो नियम की तरह दिखता है। मैं स्केल और फीड चाहता था।

वास्तव में अतिरिक्त कक्षा जोड़ने की आवश्यकता नहीं है। बूटस्ट्रैप 3.3.6

फीका और स्केल (बाएं/ध्यान में सही तीर ले जाता है)

/* 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);} 
}