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

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

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

大多数动画和其他在网站上变化和移动的东西目前都是使用 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 某些事情为真时的变量,或者有一种方法可以创建各种选择器?

没有"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('');

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

的方法