Если мы используем JavaScript MVC, то как нам сохранить анимацию для представления?

Если мы используем MVC для наших веб-страниц, особенно если мы просто изменим данные (модель) и позволим представлению просто «наблюдать» за моделью, так что любые изменения, внесенные в модель, представление будет автоматически обновляться и отражать модель, как мы можем иметь анимацию еще?

(Обновление: представление — это просто шаблон, такой как «Усы» или «Рули», например, в can.js, так как же мы можем анимировать?)

Например, если у нас есть два ряда карт. Пользователь может щелкнуть первую строку, чтобы «переместить» карточку во вторую строку. Таким образом, мы можем затемнить карту в строке 1 и затемнить карту до конца строки 2, если мы не используем MVC. Однако, если мы на самом деле используем 2 массива и позволяем 2 представлениям наблюдать за этими 2 массивами, и независимо от того, как изменяются два массива, представления отражают модель, то как мы можем на самом деле добиться постепенного исчезновения и появления? Я могу только подумать, если представление использует opacity: 0, чтобы не показывать карту, и использует переход CSS, чтобы мы анимировали исчезновение и появление карт, но тогда карты все равно будут отображаться как пустое пространство (все еще занимая место на экране) после непрозрачность равна 0. Вопрос в том, как мы можем позволить просмотру автоматически показывать, что представляет собой модель, но при этом иметь анимацию?


person nonopolarity    schedule 25.03.2014    source источник
comment
Ключевым моментом здесь является то, что данные изменяются. Другими словами, мы запускаем анимацию (процесс, связанный с просмотром), когда карта переходит из одного состояния в другое. Зрители сами решают, когда начать эту анимацию и когда остановиться.   -  person raina77ow    schedule 25.03.2014
comment
Я точно знаю, что вы имеете в виду, я не могу предложить хорошее решение. Весь код, который я видел (например, для магистрали), делает это вручную, то есть вы сами перемещаете элементы с помощью jquery. Angular кажется единственным фреймворком, который решает эту проблему docs.angularjs.org/guide/animations   -  person Sebastian    schedule 26.03.2014
comment
Вы можете попробовать это github.com/stevenvachon/can-transition   -  person Sebastian    schedule 26.03.2014


Ответы (1)


Добавление к строке и удаление из строки — это изменения состояния. А анимация — это всего лишь способ визуализировать изменения состояния.

Итак, это на самом деле довольно просто: выберите анимацию, которая будет использоваться для каждого изменения состояния (Добавить = исчезнуть, удалить = исчезнуть...), и когда это изменение состояния произойдет, выполнить соответствующую анимацию.

person Nivas    schedule 25.03.2014
comment
Возможно, я не указал четко в вопросе, что представление - это просто шаблон... например, Усы или Рули, так как же мы можем анимировать? - person nonopolarity; 25.03.2014