使用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轉換

回答

相關問題