Как пофиксить анимацию?

Question

[prolina]

Не корректно работает анимация. Должен быть эффект плавного переключения слайдеров, почти все работает корректно, но при переключении на следующий слайд есть белый блок, как от него избавиться?
Пример
https://stackblitz.com/edit/angular-zjinkw?embed=1...

Comments

[Anna_BS]

Здравствуйте, Если я Вас верно поняла. Когда у слайда пропадает класс active он возвращается с анимацией в свое первоначальное состояние transform: translateY(100%); и из-за этого виден белый беграунд. В вашем случае нужно делать не transform, а анимацию для активного слайда.

[Cheizer]

Попробуйте сделать так, применяйте transform: translateY(100%); не ко всем неактивным слайдам, а только с следующему, после активного. Но в таком случае прокрутка назад будет без эффекта выползания снизу. Поэтому лучше использовать JS для этого.

::ng-deep .carousel-item {
  /* Force to always be block */
  display: block !important;
  position: absolute;
  transform: translateY(0%);
  opacity: 0;
  transition:all  1s;
}

::ng-deep .carousel-item.active {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  top: 0;
}

::ng-deep .carousel-item.active + .carousel-item {
  transform: translateY(100%);
    opacity: 0;
  transition:all  1s;
}

[prolina]

Роман Кузнецов, я немного изменила стили, но сейчас при переключении на первый слайд нету анимации( Можно ли это как-то поправить?

::ng-deep .carousel-item {
  /* Force to always be block */
  display: block !important;
  position: absolute;
  transform: translate(0%);
  transition:all  1s;
}

::ng-deep .carousel-item.active {
  position: relative;
  transform: translate(0%);
}

::ng-deep .carousel-item.active + .carousel-item {
  transform: translate(100%);
}

[Cheizer]

prolina, а что за слайдер используете? Делайте на SWIPER SLIDER например, или еще проще SLICK слайдер, тут уже нужно CSS + JS переходами управлять. На одном CSS сложно.

Вот пример на SWIPER SLIDER https://codepen.io/Cheizer/pen/OKLaOY

[Cheizer]

prolina, я так понимаю это bootstrap на angular, тогда добавляйте angular-animate.js

Вот используйте https://mdbootstrap.com/docs/angular/advanced/carousel/

[prolina]

Роман Кузнецов, это ng bootstrap
https://ng-bootstrap.github.io/#/components/carous...

[Cheizer]

prolina, это понятно, поднимите на https://codepen.io что бы к JS был доступ. Одним CSS tyt обойтись, нужно события вешать.

[prolina]

Роман Кузнецов, https://stackblitz.com/edit/angular-ng-bootstrap-c...
здесь есть доступ к JS