Проблема с ng-анимацией, работающая над удалением ng-hide

Question

Я подозреваю, что это случай, когда вы не понимаете анимацию CSS3, но в целом я нашел, что угловая анимация очень расстраивает, чтобы учиться.

Итак, чтобы начать, у меня есть plunker для этого: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview

Как я должен показать код, чтобы получить ссылку plunker собирается, вот CSS в тестовой ситуации:

#wrapper { 
    position: relative; 
    overflow: hidden; 
} 

#wrapper, form, #wrapper > div { 
    height: 400px; 
    width: 400px; 
} 

#wrapper > * { 
    transition: 10s linear all; 
} 

form { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

form.ng-hide-add-active { 
    top: -100%; 
} 

#wrapper > div { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: #66F; 
} 

#wrapper.ng-hide.ng-hide-remove-active { 
     top: 100%; 
} 

У меня есть ситуация, когда я хочу сделать форму, и если она успешно отправится, я хочу, чтобы форма скользила вверх с сообщением об успешности, скользящем под ним. Проблема в том, что, хотя я могу получить форму для прокрутки, появляется под div. На самом деле, он работает лучше на plunker, чем на моем коде, где он запускается, отображается через анимацию, а затем снова появляется при отправке формы. Не знаю, почему так, но в общем, угловые анимации меня расстраивают. Я попытался найти примеры, и многие упоминают использование ng-animate="'name'" для создания пользовательских классов, но это, похоже, не работает для меня. Аналогично, в документации упоминается класс ng-hide-remove, но я никогда не вижу, чтобы оно применялось.

Есть ли какое-либо преимущество в использовании переходов CSS3 над созданием пользовательских анимаций с помощью модуля animate и только с помощью jQuery? Насколько я понимаю, ключевые кадры могут быть самым большим преимуществом? Это просто делает его очень трудным делать вещи, которые кажутся относительно легкими в работе jQuery ...

Answer 1

Примеры с использованием ng-animate="'name'" для версий, предшествующих Angular 1.2.

Для этих видов анимации видение двух состояний для каждого задействованного элемента.

1. Видимый
2. Hidden

У вас есть обертка. Внутри обертки у вас есть два элемента, участвующих в анимации: форма и div с сообщением. Теперь настройте свой HTML и CSS с учетом видимого состояния. При видимости, как форма, так и div должны быть видны внутри контейнера.

Ниже приведен пример, основанный на вашей (изменил его некоторые для ясности):

#wrapper { 
    position: absolute; 

    height: 200px; 
    width: 200px; 

    top: 100px; 
    left: 100px; 

    border: 1px solid silver; 
} 

#form { 
    position: absolute; 

    top: 0; 

    height: 100%; 
    width: 100%; 

    background-color: #DDFEFF; 

    transition: all 1s ease-in-out; 
} 

#submitted { 

    position: absolute; 

    top: 0; 

    height: 100%; 
    width: 100%; 

    background-color: gold; 

    transition: all 1s ease-in-out; 
} 

Обе формы и DIV являются столь же большими, как обертки и приведены в соответствие с обертками верхних, что означает в этом состоянии они будут перекрываться. Однако это не проблема, так как они не должны быть видимыми одновременно.

Теперь определите их скрытые состояния.

Например, форма должна при скрытой располагаться над оберткой:

#form.ng-hide { 
    top: -100%; 
} 

И DIV должен когда скрытые быть расположены ниже обертке:

#submitted.ng-hide { 
    top: 100%; 
} 

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

Демо:http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview