Кассета Bootstrap отказывается перейти плавно после корректировки css

Question

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

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

, но она скрывает «оставляя» содержимое слишком рано, и я понятия не имею, какие свойства для изменения в исправить это.

Я также попытался изменить ее к переходу к выцветанию с

.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, чтобы переопределить существующие детали перехода, но я не знаю, где искать больше.

Answer 1

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

1. Активные элементы имеют display: block, а не активные элементы имеют display: none

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

   Минус:

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

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

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

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

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

3. В CSS переходы инициируются путем добавления и удаления классов CSS с JQuery. Время между этими изменениями классов было жестко закодировано в коде плагина карусели (Carousel.TRANSITION_DURATION = 600). Таким образом, после 600 мс один элемент становится активным (с классом .active). В этом причина неожиданного поведения, если ваш 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; 
} 

Собираем все вместе, увидеть результаты в this demo , который использует следующий код: Less

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

Приведенный выше код может быть скомпилирован с Less autoprefixer plugin плагин в 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; 
}