将我的 jQuery 动画转换为 CSS3 过渡——“正确的”方法/处理变量？

Question

我正在进行我的第一个大型网站项目（尽管它仍然是个人的，因为它是我的投资组合网站，而不是针对客户）。我已经完成了大部分工作，并且学到了很多做这件事的过程。

网站上的大多数动画和其他变化和移动的东西目前都是使用 jQuery 动画完成的。然而，今天我注意到使用 CSS3 过渡可能是更好、更高效、更好的处理方式！

因此，我正在将我的一堆 jQuery 动画更改为 CSS3 过渡，并且大部分情况都很顺利。不过，我确实对正确的方法有一些疑问。

示例 1

例如，当设置 JS 中的某些变量时，处理需要发生的转换的最佳方法是什么？有没有办法将这些变量传递给 CSS，或者我使用 jQ 告诉它“如果为真，将这些过渡属性添加到 CSS”，以触发动画？

例如：

一个元素必须改变它的高度。它将更改为的高度取决于屏幕宽度 - 这是通过媒体查询处理的。但是，只有在xyz = true 时，高度才应该改变，否则，它应该保持不变。 CSS如何知道xyz是否为真？

示例 2

#header 使用确定页面宽度的媒体查询设置为特定高度。当 xyz = true 时，#header 的高度现在应该动画下降到 0。当 xyz = false #header 应该返回到它的初始高度（由媒体查询定义）。

这里的问题是，通过将 CSS 过渡设置为将 #header 动画设置为 0，这现在已成为元素​​样式的一部分，并且“0”将通过尝试将其返回到初始值来覆盖给出的值。

这个问题在 CSS 中通过选择器解决（我相信这就是它们的名称？诸如 :hover 和 :click 之类的东西。）——当它们被使用时，它们不会覆盖元素的样式，因此它们可以正常返回初始状态。但是在这里，没有选择器何时xyz = true。我们必须在 jQuery 中设置值，这些值现在覆盖了返回初始值的可能性。

问题

如何打击这些例子？他们都在问同样的问题。有没有办法在某事为真时向 CSS 传递变量，或者有办法创建各种选择器？

Answer 1

做事没有“正确”的方法。但是，使用 CSS 过渡/动画并不意味着您必须避免使用 javascript 逻辑。

例如，假设您想根据某些逻辑更改元素的颜色。代替使用.animate() 或.css() 在jQuery 中设置值，您可以设置以下css 类：

.element {
    color: red;
    transition: color 300ms;
}

.element.active {
    color: blue;
}

然后在 jQuery 中，您可以执行以下操作：

if ( condition )
    $('.element').addClass('active');
else
    $('.element').removeClass('active');

您可以在任何可动画的 CSS 属性上使用此方法，您只需要在元素上设置正确的过渡。 Javascript 包含逻辑并应用相关类，CSS 处理转换。

如果在极少数情况下需要使用只能通过 Javascript 检索的特定值（例如计算值），您仍然可以使用 CSS 为这些属性设置动画。例如，如果您想将元素的宽度设置为特定值。在你的 CSS 中，你可能有这个：

.element {
    width: 200px;
    transition: width 300ms;
}

在你的 javascript 中，你可以这样做：

if ( condition )
    $('.element').width('400px');
else
    $('.element').width('');

根据经验，只有在计算值时才应使用此方法。如果值是静态的，则应使用切换类的第一种方法。