title: If we use JavaScript MVC, then how can we still have animation for the view?
body: <p>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?</p>
  
  <p>(<strong>Update:</strong> the view is just a template such as Mustache or Handlebars, for example, in can.js, so how can we animate?)</p>
  
  <p>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 <code>opacity: 0</code> 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?</p>