javascript - 在 Javascript 和 CSS 之间保持 DRY

Question

假设您有一个菜单，可以通过按钮切换打开和关闭。我的标准做法是为关闭的菜单编写 CSS，并编写指定(或动画)打开菜单状态的 Javascript。

最近我接触了 Active.js，一个客户端 MVC 框架。它提供带有构建器的 View 类来制作 DOM 片段，并且可以为这些片段提供处理动画和 DOM 状态等事情的方法。

在 CSS 中描述初始状态，然后在 JavaScript 中描述替代状态，感觉有些奇怪。如果没有动画，只在 CSS 中完成所有操作并使用 javascript 添加或删除 DOM 类是明智的。

我的另一个想法是用 JSON(而不是 CSS)描述 DOM 对象的所有状态(折叠、展开、红色、绿色)，并为我的 ActionView 对象提供在这些状态之间进行动画处理的方法。有人这样做吗？其他想法？

Answer 1

就动画而言，在 CSS 中使用基本样式然后在 javascript 中使用纯 CSS 无法实现的动画或样式不会违反 DRY，因为如果做对了。如果你认为它是一种更“纯粹”的做事方式，你可以尝试在 javascript 或 CSS 中保留更多的样式，但这些只是你正在使用的语言，如果你认为它们都是相同底层 DOM 的表达式，那么它完全适合在需要时使用更具表现力或兼容的语言。

我通常会尽可能地使用 CSS，然后开始使用 jQuery 来做 CSS 无法处理或不能跨浏览器的事情，例如动画。