Bootstrap carousel отказывается плавно переходить после настройки css

в течение последних 3 часов я пытался сделать простую настройку для переходов карусели Bootstrap 3. Я попытался изменить скорость скольжения, где это единственное, что, кажется, имеет какой-либо эффект:

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

но он скрывает содержимое "ухода" слишком рано, и я понятия не имею, какое свойство изменить, чтобы исправить это.

Я также попытался изменить его на переход fade с помощью 

.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;
}

и почти каждый другой фрагмент, чтобы сделать так, чтобы я пришел поперек, но каждый из них всегда сначала удалял содержимое, показывая безликий фон, прежде чем исчезнуть в следующем. Что я упускаю? Все, что мне нужно, это простой CSS для переопределения существующих деталей перехода, но я больше не знаю, где искать.

6
css javascript twitter-bootstrap

1 ответов

я думаю, что различные аспекты плагина карусели bootstrap дают эффекты, которые вы упоминаете.

  1. активные элементы display: block в то время как не активные элементы имеют display: none

    это можно решить, предоставив все элементы display: block и затем установка position to absolute С top: 0 и left: 0, в результате чего элементы перекрытия. Настройка opacity: 0; делает их невидимыми по умолчанию.

    минус:

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

    одна проблема the position: absolute это то, что контейнер не получает height. Предыдущее можно решить, установив position первый элемент relative (это добавить правильное положение уже). В меньшем коде это выглядит следующим образом:

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

  2. Bootstrap использует translate3ds, чтобы изменить положение элемента в пространстве. Вам не понадобятся эти преобразования, поэтому сбросьте их. Используя меньше, код, показанный ниже:

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

  3. переходы CSS запускаются путем добавления и удаления классов CSS с помощью jQuery. Время между этими изменениями класса было жестко закодировано в коде плагина carousel (Carousel.TRANSITION_DURATION = 600). Итак, после 600 мс, один элемент становится активным (имея .активный класс.) Это причина неожиданного поведения, если ваш css transition-duration больше чем 0,6 секунды.

изменения класса CSS следующие:

активный элемент имеет класс .active ->.active.left -> нет Следующий пункт не имеет класс -> .next.left ->.active

так .active.left и .next.left важны (или .prev.right и .active.right когда вы скользите назад).

потому что все изображения уже сложены, вы можете использовать z-index свойство, чтобы сделать изображение в стеке видимым, потому что мы можем изменить opacity в то же время. Вы можете использовать следующий код меньше, чтобы исчезнуть в следующем слайде:

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

чтобы убедиться, что элементы управления видны также, использовать:

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

собирая все вместе, смотрите результаты в демо, который использует следующий меньший код:

.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;
}

приведенный выше код может быть скомпилирован с меньше autoprefixer плагин плагин в CSS со следующей командой:

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

выходы:

.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;
}
17