Вкладені анімації в AngularJS з використанням ui-router

Не так давно, я намагався ефективно налаштувати вкладену анімацію переходу в AngularJS з ui-router.

Я не хотів використовувати javascript і зіпсувати контролери. І я знайшов дуже просте і зрозуміле рішення з використанням LESS.

Ось приклад кінцевого результату.

Як це працює

Для початку переконайтеся, що ви включили 'ngAnimate' і 'ui-router' у ваш додаток, і ви обробляєте вкладені view і CSS анімації в цілому.

Ось базовий html. Нашою метою є анімація, яка відбувається в сайдбарі і панелі ui-view, коли master ui view змінює стан.

<div>
        
        <div></div>
        <div></div>
    </div>

По-перше, ми повинні переконатися, що переходи встановлені на div, які ми хочемо анімувати (з використанням LESS mixins).

#masterUI { //very important!
    .transition(all 1s); 
    }

#sidebar-wrapper, #topBar {
    .transition(all .5s ease-out);
}

Важлива Примітка: якщо використовувати CSS3 переходи, всі переходи нащадків повинні бути завершені за час переходу для masterUI інакше вони будуть виглядати дивно. З кастомними CSS3 анімаціями (animate.css, наприклад) встановіть невелике значення, 0.1 секунди як варіант.

Ось LESS або SASS, який виконує анімацію (аналогічного результату можна досягти з чистим CSS)

#masterUI.ng-enter {
  (animate any div in your child ui-views)
   #sidebar-wrapper { .translate3d(-@sidebarSize,0,0); }
   #topBar { .translate3d(0,-65px,0); }
}
#mainView.ng-enter-active {
   #sidebar-wrapper{ .translate3d(0,0,0); }
   #topBar { .translate3d(0,0,0); }
}

#mainView.ng-leave { etc.. }
#mainView.ng-leave-active { etc.. }

Це призводить до виконання анімацій для вмісту двох div, коли значення masterUI view змінюється. Ці div можуть бути чим завгодно, sidebarUI view або dashboardUI view. Анімація протікає від enter -> enter-active і те ж саме відноситься і до leave -> leave-active.

Ще один приємний момент полягає в тому, що ці переходи застосовуються тільки для зміни #mainView і повністю відокремлені від переходів, коли view нащадка змінюється.

Для більшого задоволення, додайте Animate.css до вашого проекту (конвертуйте в LESS і додайте) або створіть власні анімаційні класи. Синтаксис тепер більш високого рівня, більш читабельний. Вам також не потрібно додати клас ng-enter-active!

 #masterUI.ng-enter {
   #sidebar-wrapper { .fadeInLeft; }
   #topBar { .fadeInUp; }
}

Висновок

Ці приклади прості, але додавання додаткових ефектів, затримки і анімації може зробити переходи набагато більш динамічними.

На мій погляд це досить гарний і гнучкий спосіб отримати чистий CSS переходи з вкладеними view.