Задержка перехода не работает с элементом карусели - PullRequest
Новая
       149

Задержка перехода не работает с элементом карусели

1 голос
/ 09 мая 2020

Когда элемент карусели начинает скользить, я хочу, чтобы он подождал 0.7s, чтобы его содержимое, называемое bannerContent, анимировалось вверх, а затем скользило.

Итак, я дал свойство transition-delay:0.7s каждому элементу карусели но я вижу, что до завершения перехода элемент исчезает, и его display становится none. Я думаю, что карусель не принимает во внимание transition-delay.

Вот что я пробовал:

HTML: 

<div class="slider">
  <div id="banner" class="carousel slide" data-ride="carousel" >
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="bannerContent">
          <h2>Exclusive Luxury Services Group</h2>
          <p>The first; Lifestyle & Business management concierge service in Iran</p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="bannerContent">
          <h2>LIFE ELECT</h2>
          <p>first Lifestyle & Etiquette School in Iran</p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="bannerContent">
          <h2>LUXELECT</h2>
          <p>first Luxury valuation in Iran</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: 

.slider{
  height: 100vh;
}
.slider .carousel , .slider .carousel-inner{
  height: 100%;
}
.slider .carousel-item{
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transition-delay:0.7s;
}
.slider .carousel-item-prev, .slider .active.carousel-item-left {
  transform: translate3d(0,-100%,0);
}
.slider .carousel-item-next.carousel-item-left, .slider .carousel-item-prev.carousel-item-right {
  transform: translate3d(0,0,0);
}
.slider .carousel-item-next, .slider .active.carousel-item-right {
  transform: translate3d(0,100%,0);
}
.bannerContent{
  position: absolute;
  right: 45px;
  top:50%;
  transform: translateY(-50%);
  transition: all 0.7s;
}
.slider .active.carousel-item-left .bannerContent{ /* when the item begins to slide */
  top:-100%;
  transform: translateY(0);
}

Также я пытался использовать carousel("pause") в событии "slide.bs.carousel", но увидел, что это невозможно.

Как сделать так, чтобы элемент карусели не исчезал до завершения перехода?

Спасибо!

...