Как использовать CanJS с VelocityJS?

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

Насколько мне известно, CanJS не имеет механизма ожидания процесса перед удалением узлов, поэтому подходящим обходным путем является наличие узла, который не удаляется при изменении содержимого. Вы можете структурировать разметку внутри этого узла, но переход скорости должен произойти на постоянном узле, чтобы переход был успешным.

Для примера постепенного появления и исчезновения при настройке содержимого для помещения в контейнер перехода следует использовать асинхронный установщик (с аргументами val и resolve), чтобы переход работал правильно. Сначала исчезните (и используйте возвращенное обещание для ожидания), затем обновите разметку с новым содержимым (используя resolve()), затем постепенно проявитесь. Я сделал JSBin, который демонстрирует эту концепцию, хотя содержимое внутри перехода очень просто в демо.

https://jsbin.com/lesagebomu/edit?html,js,output

В случае компонента quizz-question вы хотите отобразить весь компонент внутри div в fade-in. Вероятно, также есть способ обобщить это на компонент более высокого порядка, например, <div class = "fade-in"><content /></div> и некоторые манипуляции с данными.

Другой способ сделать это - отправлять события для добавляемых и удаляемых элементов, а затем прослушивать эти события в представлении:

    <li on:click = "../removeQuestion(question)"
        on:removing:by:question = "fadeOut()"
        on:inserting:by:question = "fadeIn()">{{question.name}}</li>

Вы можете увидеть это здесь: https://jsbin.com/lepuxaq/edit?html,js,output