Question

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

正如您在CSS类中看到的那样：

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

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

我已尝试通过 .css（）方法使用jQuery执行此操作：

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

但由于某种原因，转换不会被触发。为什么呢？

非常感谢所有帮助！

Answer 1

jQuery Animate。 http://api.jquery.com/animate/

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

Answer 2

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

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

来自jQuery docs

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

Answer 3

如果我正确得到你的观点，你希望转换使用值/值，方法是将它/它们添加到当前值/值对：如果是这样，你应该试试下面的方法;

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

Answer 4

好的，既然你的评论表明你喜欢它，那么这就是你的答案：

使用jQuery Transit。

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

它有一个类似animate的API，当不支持CSS3转换时，它可以回退到animate。

Answer 5

也许我没有注意，但我没有看到过渡属性的任何定义，例如持续时间，缓和等......我假设你的CSS上有这些？如果没有，那东西将不起作用。

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

如何使用动态值转换为DOM元素设置动画？

5 个答案: