如果我们使用 JavaScript MVC，那我们怎么还能有视图动画呢？答案

【问题标题】：If we use JavaScript MVC, then how can we still have animation for the view?如果我们使用 JavaScript MVC，那我们怎么还能有视图动画呢？
【发布时间】：2014-03-25 17:56:23
【问题描述】：

如果我们将 MVC 用于我们的网页，特别是如果我们只是修改数据（模型），并让视图“观察”模型，以便对模型进行任何更改，视图都会自动更新并且体现模型，怎么还能有动画呢？

（更新：视图只是一个模板，例如 Mustache 或 Handlebars，例如 can.js 中的，那么我们如何制作动画？）

例如，假设我们有两行卡片。用户可以点击第一行将卡片“移动”到第二行。因此，如果我们不使用 MVC，我们可以将第 1 行中的卡片淡出，并将卡片淡入到第 2 行的末尾。但是，如果我们实际使用 2 个数组，让 2 个视图观察这 2 个数组，无论这两个数组如何变化，视图都反映了模型，那么我们如何才能真正实现淡出淡入呢？我只能想到如果视图使用opacity: 0不显示卡片，并使用CSS过渡让我们动画卡片的消失和出现，但是卡片仍然会显示为空白空间（仍然占用屏幕空间） opacity 为 0 后，问题是，如何让 view 自动显示模型是什么，但仍然有动画？

【问题讨论】：

这里的重点是观察到数据变化。换句话说，当卡片从一种状态变为另一种状态时，我们启动动画（与视图相关的过程）。由视图决定何时开始此动画 - 以及何时停止。
我完全明白你的意思，我不能提出一个好的解决方案。我看到的所有建议的代码（例如骨干）都是手动执行的，这意味着您自己使用 jquery 移动元素。 Angular 似乎是解决这个问题的唯一框架docs.angularjs.org/guide/animations
你可能想试试这个github.com/stevenvachon/can-transition

标签： javascript backbone.js model-view-controller javascriptmvc canjs

【解决方案1】：

添加到行和从行中删除是对状态的更改。动画只是一种可视化状态变化的方式。

因此，它实际上非常简单：确定用于每个状态变化的动画（添加 = 淡入，移除 = 淡出...），当状态变化发生时，执行相应的动画。

【讨论】：

也许我在问题中没有明确说明，视图只是一个模板......例如 Mustache 或 Handlebars，那么我们如何制作动画？