Почему не срабатывает transition в CSS?

Question

[Vakha1]

Есть блок слайдера в нем 5 картинки 100х100. Я сдвигаю картинки в JS на -100px и вот указываю в CSS
.sliderImg{
position: relative;
left: 0;
transition: all ease 3s;
}
Первая картинка когда сдвигается transition срабатывает а дальше нет.
Почему так?

Comments

[Павел Антонов]

код в песочницу оформите и посмотрим почему)

[Максим Тимофеев]

Вы думаете все слайдеры работают одинаково? Множество вариантов, а Вы даже название слайдера не указали

[Vakha1]

Павел Антонов, Вот ссылка
Как сделать чтоб блоки плавно менялись?

[Vakha1]

Ссылка
https://codepen.io/anon/pen/GYZLqv

[Vakha1]

Максим Тимофеев, Вверху я скину ссылку на кодопен посмотрите если есть время.

[Максим Тимофеев]

Vakha1, transition: all ease 3s; сработал бы если бы Вы класс добавляли, а Вы двигаете средствами js, так что и анимацию надо там добавлять. Документация на тему:
https://learn.javascript.ru/js-animation

Answer 1

[AngReload]

Проблема в том, что ты не меняешь свойство left, можешь открыть инструменты разработчика и убедиться что у всех блоков left равен нулю. Слайды движутся только потому, что ты удаляешь первый слайд и ставишь его в конец.
Попробуй сначала просто двигать слайды. Задай родителю position relative, а слайдам position absolute. И только меняя left, без удаления и добавления слайдов, попробуй менять их позицию. Как только получится, слайду который перебегает из начала в конец устанавливай прозрачность или меньший z-index, и слайдер готов.