Bootstrap carousel, css ayarlamalarından sonra sorunsuz geçiş yapmayı reddediyor

Question

Son 3 saat içinde Bootstrap 3'ün atlıkarınca geçişleri için basit bir ayarlama yapmaya çalışıyorum. Bu herhangi bir etkisi var gibi gözüküyor tek şey slayt hızını değiştirme denedim:

.carousel-inner .item { 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    transition-duration: 2s; 
} 

ama çok yakında 'bırakarak' içeriği gizleyen ve ben değiştirmek için hiçbir ipucu ne özelliği var Bunu düzelt. ,

Ben de

.carousel-fade .item { 
    opacity: 0; 
    -webkit-transition: opacity 2s ease-in-out; 
    -moz-transition: opacity 2s ease-in-out; 
    -ms-transition: opacity 2s ease-in-out; 
    -o-transition: opacity 2s ease-in-out; 
    transition: opacity 2s ease-in-out; 
    left: 0 !important; 
} 

.carousel-fade .active { 
    opacity: 1 !important; 
} 

.carousel-fade .left { 
    opacity: 0 !important; 
    -webkit-transition: opacity 0.5s ease-in-out !important; 
    -moz-transition: opacity 0.5s ease-in-out !important; 
    -ms-transition: opacity 0.5s ease-in-out !important; 
    -o-transition: opacity 0.5s ease-in-out !important; 
    transition: opacity 0.5s ease-in-out !important; 
} 

.carousel-fade .carousel-control { 
    opacity: 1 !important; 
} 

Ve hemen her pasajı yüzden karşılaşanlar bunu bir solma geçiş değiştirmeyi denedim ama her biri her zaman ilk bırakarak içeriği kaldırdık bir sonraki solma önce, özelliksiz bir arka plan gösteren. Neyi kaçırıyorum? Tek ihtiyacım olan mevcut geçiş ayrıntılarını geçersiz kılacak bazı düz CSS'lerdir, ama daha fazla nereye bakacağımı bilmiyorum.

Answer 1

Bootstrap'in atlıkarınca eklentisinin farklı yönlerini anlattığınız etkiyi düşünüyorum. değil aktif ürün display: none

varken

1. Etkin öğeler Bu, tüm öğeleri display: block veren ve daha sonra örtüşen öğeler sonuçlanan top: 0 ve left: 0 ile absolute için position ayarlayarak çözülebilir display: block var. opacity: 0; ayarı, bunları varsayılan olarak görünmez yapar.

   Eksi: position: absolute ait

   .carousel-inner > .item { 
       opacity: 0; 
       top: 0; 
       left: 0; 
       width: 100%; 
       display: block; 
       position: absolute; 
   } 
   

   Bir problem kap height almaz olmasıdır. Birincisi, ilk öğenin position ayarını relative olarak ayarlayarak çözülebilir (zaten doğru konumu ekliyor). Az kodunda, aşağıda belirtildiği gibidir:

   .carousel-inner > .item { 
       :first-of-type { 
       position:relative; 
       } 
   } 
   

2. Bootstrap uzayda öğenin konumunu değiştirmek için translate3d s kullanır. Bu dönüşümlere ihtiyacınız olmayacak, sıfırla. Az yararlanan kod aşağıda gösterilen:

   .carousel-inner > .item { 
       transform: translate3d(0,0,0) !important; 
   } 
   

3. CSS geçişleri ekleme ve jQuery ile CSS sınıflarını kaldırarak tetiklenir. Bu sınıf değişimleri arasındaki süre, karusel eklenti kodunda kodlanmıştır (Carousel.TRANSITION_DURATION = 600). Yani, 600 ms sonra, bir öğe aktif hale gelir (.active sınıfına sahip). Css transition-duration, 0.6 saniyeden daha büyük ise beklenmedik davranış nedeni budur. aşağıdaki gibi

CSS sınıf değişiklikleri

şunlardır:

aktif madde sınıfını .active var ->.active.left - Sıradaki parça klası yok > yok ->.next.left ->.active

Yani .active.left ve .next.left önemlidir (veya geriye doğru kaydırdığınızda .prev.right ve .active.right).

Tüm görüntüler zaten yığınlanmış olduğundan, 'u aynı anda değiştirebildiğimizden, yığınta görüntüyü görünür hale getirmek için z-index özelliğini kullanabilirsiniz.

.carousel-control { 
    z-index:4; 
} 

hep birlikte koymak, this demo sonuçları görmek:

.carousel-inner { 
    > .next.left { 
    transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    z-index:2; 
    } 
    > .active.left { 
    z-index:1; 
    } 
} 

kontrolleri yanı kullanılması görünür olduğundan emin olmak için: Bir sonraki slaytta solmaya aşağıdaki Az kodu kullanabilirsiniz aşağıdaki az kodu kullandığım:

.carousel-inner { 
> .item { 
    opacity: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    position: absolute; 
    z-index:0; 
    transition: none; 
    transform: translate3d(0,0,0) !important; 
    &:first-of-type { 
    position:relative; 
    } 
    } 
> .active { 
    opacity: 1; 
    z-index:3; 
} 

> .next.left, 
> .prev.right { 
    transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    left: 0; 
    z-index:2; 
    }                            
> .active.left, 
> .active.right { 
    z-index:1; 
    } 
} 
.carousel-control { 
z-index:4; 
} 

yukarıdaki kod aşağıdaki komutla CSS içine Less autoprefixer plugin eklenti ile derlenebilir:

lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' code.less 

çıkış verdiğinde:

.carousel-inner > .item { 
    opacity: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    position: absolute; 
    z-index: 0; 
    -webkit-transition: none; 
     -o-transition: none; 
      transition: none; 
    -webkit-transform: translate3d(0, 0, 0) !important; 
      transform: translate3d(0, 0, 0) !important; 
} 
.carousel-inner > .item:first-of-type { 
    position: relative; 
} 
.carousel-inner > .active { 
    opacity: 1; 
    z-index: 3; 
} 
.carousel-inner > .next.left, 
.carousel-inner > .prev.right { 
    -webkit-transition: opacity 0.6s ease-in-out; 
     -o-transition: opacity 0.6s ease-in-out; 
      transition: opacity 0.6s ease-in-out; 
    opacity: 1; 
    left: 0; 
    z-index: 2; 
} 
.carousel-inner > .active.left, 
.carousel-inner > .active.right { 
    z-index: 1; 
} 
.carousel-control { 
    z-index: 4; 
}