Правильно анимируйте скрытие/отображение элемента с помощью Angular и animate.css.

У меня есть базовый планкер, который показывает проблему: http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview. Когда вы нажимаете на кнопку, первый элемент отображается/скрывается с подпрыгивающей анимацией. Это прекрасно работает, но проблема в том, что элементы под ним просто перескакивают на новое место, что довольно уродливо и раздражает.

Итак, если вы нажмете на кнопку, элемент Один соскользнет, ​​а через секунду подпрыгнут элементы Два и Три. Я бы хотел, чтобы все скользило вверх, а элемент Один скользил прочь. Как это может быть сделано? Нужно ли мне отказаться от animate.css и написать собственную анимацию? Как это сработает? (Меня действительно не волнует прыгающая анимация, она должна просто ускользнуть / вернуться в поле зрения.)


person Kevin Renskers    schedule 21.05.2014    source источник


Ответы (1)


Текущая упругая анимация, которая у вас есть, использует свойство преобразования, которое не будет влиять на одноуровневые элементы. Если бы вы сделали что-то вроде анимации полей, другие элементы тоже двигались бы.

Вы можете либо изменить метод анимации целевого элемента, либо оставить его и дополнительно анимировать соседний элемент целевого элемента. Я изменил ваш Plunker, демонстрируя последний:

http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview

* Это также демонстрирует использование переходов на скрытом изображении и ключевых кадров в шоу.

Чтобы выбрать соседнего брата рядом с тем, на который влияет ng-hide, создайте селектор css с символом +:

.item.ng-hide-add + .item {...}

Затем при переходе/анимации margin-top оставшиеся элементы элемента также будут перемещаться.

person kinetifex    schedule 24.05.2014