CODEWITHSUNDEEP
javascriptbackbone.jsmodel-view-controllerjavascriptmvccanjs
nonopolarity
nonopolarity

Reputation: 151036

If we use JavaScript MVC, then how can we still have animation for the view?

If we use MVC for our webpages, especially, if we just modify the data (the model), and let the view just "observe" the model so that whatever changes are done to the model, the view will automatically be updated and reflects the model, how can we have animation still?

(Update: the view is just a template such as Mustache or Handlebars, for example, in can.js, so how can we animate?)

For example, say if we have two rows of cards. The user can click on the first row to "move" a card into the second row. So we can fade out the card in Row 1 and fade in the card to the end of Row 2 if we don't use MVC. However, if we actually use 2 arrays and let 2 views observe these 2 arrays and no matter how the two array changes, the views reflect the model, then how can we actually have the fade out and fade in? I can only think of if the view uses opacity: 0 to not show the card, and use CSS transition so that we animate the disappearance and appearance of the cards, but then the cards will still show as empty space (still occupying screen space) after the opacity is 0. The question is, how can we let view automatically show what the model is but still have animation?

Upvotes: 0

Views: 213

Answers (1)

Nivas
Nivas

Reputation: 18334

Adding to a row and removing from a row are changes to a state. And animation is just a way to visualize the changes to state.

So, it is actually pretty straightforward: Decide an animation to be used for every state change (Add = Fade In, Remove = Fade Out...) and when that state change happens, perform the corresponding animation.

Upvotes: 1

Related Questions