将我的 jQuery 动画转换为 CSS3 转换 — "proper" 方法/处理变量？

Question

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

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

因此，我正在将我的一堆 jQuery 动画更改为 CSS3 过渡，而且大部分都很顺利。但是，我确实有一些关于正确方法的问题。

示例 1

例如，当设置了 JS 中的某些变量时，处理需要发生的转换的最佳方法是什么？有没有办法将这些变量传递给 CSS，或者我是否使用 jQ 告诉它 "when true, add these transition properties to the CSS"，以触发动画？

例如：

元素必须改变它的高度。它将更改为的高度因屏幕宽度而异——这是通过媒体查询处理的。但是，只有 xyz = true 时，高度才应该改变，否则，它应该保持不变。 CSS 怎么知道 xyz 是否为真？

示例 2

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

这里的问题是，通过设置 CSS 过渡动画 #header 到 0，它现在已经成为元素样式的一部分，并且“0”将覆盖由试图 return 它初始。

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

问题

如何对抗这些例子？他们都在问同一个问题；有没有一种方法可以传递 CSS 某些事情为真时的变量，或者有一种方法可以创建各种选择器？

Answer 1

没有"correct"做事的方法。但是，使用 CSS transitions/animations 并不意味着您必须避免使用 javascript 逻辑。

例如，假设您想根据某种逻辑更改元素的颜色。您可以设置以下 css 类:

，而不是使用 .animate() 或 .css() 来设置 jQuery 中的值

.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('');

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

的方法

将我的 jQuery 动画转换为 CSS3 转换 — "proper" 方法/处理变量？

Converting my jQuery animations to CSS3 transitions — "proper" methods / handling variables?

jquery

css

media-queries

示例 1

示例 2

问题