Как сделать скользящее движение с помощью CSS в angular?

Рассмотрим следующий плункер

Я пытаюсь сделать так, чтобы список номеров сдвигался влево при входе и сдвигался влево при выходе.

введите здесь описание изображения

Вот мой css

.stuff {
  display: inline-block;
  margin-left: 10px;
}

button {
  display: block;
}

.stuff.ng-enter,
.stuff.ng-leave {
    -webkit-transition: all 1s ease-in-out;

}

.stuff.ng-enter {
    left: 100%;
}
.stuff.ng-enter-active {

    left: 0;
}

.stuff.ng-leave {
    left: 0;
}
.stuff.ng-leave-active {
    left: -100%;
}

Я проверил, что если я изменяю переход позиционирования на непрозрачность, он работает, но по какой-то причине анимация left или right не работает.

Кто-нибудь может мне помочь?

Спасибо


javascript html css angularjs ng-animate
person testing    schedule 09.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Я только что внес в класс небольшое изменение.

.stuff.ng-enter,.stuff.ng-leave {

 -webkit-transition: all 1s ease-in-out;
 position:relative;

}

Надеюсь, это ответит на вопрос.

person semuzaboi    schedule 02.11.2016