jquery - 如何使用具有动态值的转换为 DOM 元素设置动画？

Question

我一直在尝试仅使用转换来为 DOM 元素设置动画，因为我读过它们在许多形式中都更好。但是，我的问题很简单，有没有办法使用过渡为动画传递动态值？我基本上不知道该怎么做，即。我只能通过添加一个具有固定值的类来为 DOM 元素设置动画，如本例所示（在 webkit 浏览器上运行良好）

正如您在 CSS 类中看到的：

.motion {
  left: 300px;
  top: 200px;
  position: absolute;
}

...动画的值是静态的，我想知道如何在运行时将参数传递给过渡？, （例如，左的不同值。例如）

我尝试通过.css()方法使用 jQuery 来实现，如下所示：

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '30', 'top': '100' });          
  });
}

但由于某种原因，过渡不会被触发。为什么？

非常感谢所有帮助！

score 1 · Accepted Answer

如果您使用的是 jQuery 1.6+，那么您可以尝试使用.css()方法来获得动画行为。

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=30', 'top': '+=100' });          
  });
}

来自 jQuery 文档

从 jQuery 1.6 开始，.css() 接受类似于 .animate() 的相对值。相对值是一个以 += 或 -= 开头的字符串，用于增加或减少当前值。

score 1 · Accepted Answer

如果我正确理解了您的观点，您希望转换通过将值/值添加到当前值/值对的方式来使用值/值：如果是这样，您应该尝试以下方法；

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=' + 30, 'top': '+=' + 100 });
  });
}

score 1 · Accepted Answer

$("#square").animate({'left':'30px','top':'100px' }, "slow");

score 1 · Accepted Answer

好的，既然您的评论表明您喜欢它，这是您的答案：

它支持您希望的缓动功能。

它有一个animate类似 - 的 API，并且可以回animate退到不支持 CSS3 过渡的情况。

score 0 · Accepted Answer

也许我没有注意，但我在任何地方都没有看到过渡属性的定义，例如持续时间、缓动等……我假设你的 CSS 上的某个地方有这些？如果没有，这件事就行不通。

您需要设置 2 个定义：一个用于转换本身，另一个用于您要转换的属性。这是我对 CSS3 规范的不满，他们有这种复杂的转换和过渡方式。真是构思不周。

5 回答 5