使用jQuery的Webkit转换

使用wordpress，我有一个页面模板（所以我可以在PHP中工作），我添加了一个样式标签。我需要使用一个变量来控制高度和宽度，这样我的网站才会响应。我知道以下方法行不通，但我试图解释我的思维方式。如果我可以在PHP中创建一个变量，然后每次回应变量的高度和修改下面，这将是完美的 - 除了我遇到明显的问题，我不能通过PHP的窗口高度，因为它是服务器端，我不能包括jQuery在一个样式标签内。对任何愚蠢的道歉，我只是想解释我的思想过程，并欢迎任何指示被指出！谢谢使用jQuery的Webkit转换

@-webkit-keyframes custom_animation { 
     <?php $test = '<script>$(window).height()</script>'; ?> 
    0% { 
     -webkit-transform: translate(0%, <?php echo $test; ?>) scale(.7); 
    } 

    37% { 
     -webkit-transform: translate(17%, 171%) scale(1); 
    } 

    44% { 
     -webkit-transform: translate(19%, 175%) scale(1); 
    } 
    50% { 
     -webkit-transform: translate(15%, 161%) scale(1); 
    } 

    100% { 
     -webkit-transform: translate(20%, 151%) scale(1); 
    }

来源

2013-11-03 TechyDude

您可以使用jQuery的animate()属性为CSS样式设置动画。您会注意到，虽然此属性无法处理某些更新/高级的CSS样式（例如转换），但您可以通过动画制作其他内容（如数字），然后使用该数字应用CSS来解决此问题，反反复复，整个动画制作过程：

var elem = $('.element-class'); 
$({num: 0}).animate({num: 100}, { 
    duration: 1000, 
    step: function(now) { 
     elem.css({ 
      transform: 'translate(0%, '+now+'%)' 
     }); 
    } 
});

这使您可以在一个对象创建值，然后用step在动画的每个“步骤”来设置CSS声明。

http://jsfiddle.net/X8SYg/

UPDATE

在回答您的意见，您可以用不同的方法来多个参数，以及链中的多个动画阶段提供一起..我将带您通过它，并在最后一个最后的演示：

var x, y, s, count; 
x = 0; 
y = $(window).height(); 
s = 0.7; 
count = 1;

您将需要一些变量来存储的东西......每一个你操纵性能的一个变量，以及一个瓦里能够存储您所在动画的哪一步。

function animate(newX,newY,newS,duration){ 
    $({x: x, y: y, s: s}).animate({x: newX, y: newY, s: newS}, { 
     duration: duration,

我创建了一个函数来环绕动画块，以便我可以随时调用它，并将新值传递给动画。初始对象使用变量来设置起始点，变量存储每个属性的当前值。结束状态对象使用通过函数调用传入的值，持续时间也是如此。

 complete: function(){ 
      if(count < aq.length){ 
       animate(aq[count][0],aq[count][1],aq[count][2],aq[count][3]); 
       count++; 
      } 
     },

我也添加了这个回调函数，它在动画的每一步完成后都会运行。这个函数基本上用我已经存储在数组中的新变量重新调用动画函数..我会循环回到最后解释这一点。

 step: function(now,fx) { 
      if(fx.prop == 'x') 
       x = now; 
      if(fx.prop == 'y') 
       y = now; 
      if(fx.prop == 's') 
       s = now; 
      $('div').css({ 
       transform: 'translate('+x+'%, '+y+'%) scale('+s+')' 
      }); 
     }

以前一样，该step函数设置CSS声明..但这个时候，我们还可以使用fx对象的step功能提供。该功能基本上分别通过每个属性，因此您可以使用fx.prop来查看当前正在运行哪个属性，然后相应地更新您的变量。

// animation queue 
var aq = [ 
    [17,171,1,3700], 
    [150,75,2,700], 
    [15,261,1,600], 
    [200,51,4,5000] 
];

您可以将您的动画队列构建到多维数组中。基本上，这是一个存储一组数组的数组，它依次存储动画每个步骤的所有值（x，y，s，duration）。

如果您回头介绍回调函数，您现在可以看到如何执行这些回调函数......每次调用它时，它都会使用count变量来查看我们正在执行的步骤，然后抓取所有的值从该数组中取出并传递给函数。我在这里做同样的事情：

animate(aq[0][0],aq[0][1],aq[0][2],aq[0][3]);

这是对animate功能，踢东西到运动的第一个电话。

看到整个演示，都放在了这里：

http://jsfiddle.net/5GWxX/3/

请注意，我将根据你个停车点的持续时间。 3700代表10秒钟的37％。

我已经改变了你的数字，使动画更引人注目。请记住，翻译百分比是相对于元素的大小，所以移动10％左右不是很多，除非你的元素非常大。我假设你已经测试过你的CSS动画，并且知道它们在做什么！

希望对你有所帮助，祝你好运！

来源

2013-11-03 05:44:04

Thanks @ blake-mann！但是如果我有10个步骤，我将如何指示步骤37,44等？ – TechyDude

我已更新问题以更好地解释我的意见 – TechyDude

查看已更新的答案，了解您的情况的完整演练。 –

使用jQuery的Webkit转换

回答

相关问题