是否可以通過jquery動畫CSS屬性翻譯？如何動畫CSS翻譯

$('.myButtons').animate({"transform":"translate(50px,100px)"})

它可以在許多瀏覽器中工作嗎？

演示不工作：http://jsfiddle.net/ignaciocorreia/xWCVf/

UPDATE：

我的解決方案：

簡單的實現方式 - http://jsfiddle.net/ignaciocorreia/R3EaJ/
複雜的實現和多瀏覽器 - http://ricostacruz.com/jquery.transit/

來源

2012-12-23 Ignacio Correia

我會採取一種猜測，並表示它只能在WebKit瀏覽器，如果在所有！ – adeneo

我發現這個例子：http://jsfiddle.net/qGEmy/7/，但我似乎無法讓它與我的例子一起工作。 –

這就是你如何做到 - > [** FIDDLE **]（http：// jsfiddle。net/adeneo/xWCVf/2 /） – adeneo

$('div').css({"-webkit-transform":"translate(100px,100px)"});

http://jsfiddle.net/xWCVf/5/

來源

2012-12-23 15:33:53

這是想法，但動畫。你能更新它嗎？ –

只需添加一個CSS過渡到它。 –

@IgnácioR.Correia - 更新後的鏈接 –

有jQuery的插件，可以幫助您實現這一點，如：http://ricostacruz.com/jquery.transit/

來源

2012-12-23 15:25:13 flec

讓我們試試吧。我想要的只是添加一行代碼到我的網站。它不需要整個庫。 –

@IgnácioR.Correia如果你正在尋找一個跨瀏覽器的解決方案，我認爲插件/庫是要走的路。除了jQuery，你已經在使用一個庫。 – flec

我已經在玩它了。很酷。奇蹟般有效。謝謝。 –

根據CanIUse你應該用多個前綴有它。

$('div').css({ 
    "-webkit-transform":"translate(100px,100px)", 
    "-ms-transform":"translate(100px,100px)", 
    "transform":"translate(100px,100px)" 
    });

來源

2014-05-16 16:00:23

從jQuery 1.8開始，你不再需要指定供應商前綴。 http://api.jquery.com/css/#css2 – davidgoli

原始的海報詢問了*代碼沒有做的動畫*。 –

-1

您需要在CSS中設置關鍵幀動畫。並使用與jQuery的關鍵幀：

$('#myTest').css({"animation":"my-animation 2s infinite"});

#myTest { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: black; 
 
} 
 

 
@keyframes my-animation { 
 
    0% { 
 
    background: red; 
 
    } 
 
    50% { 
 
    background: blue; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myTest"></div>

來源

2016-07-12 14:52:07

不幸的是，這並不回答關於動畫'transform：translate（）'的具體動畫的原始問題。 –

我也一直在尋找一個好辦法做到這一點，我找到了最好的方法是設定在「改造」屬性，然後過渡更改轉換，然後刪除轉換。

我把它一起在一個jQuery插件

https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0

你會使用這樣的代碼：

$("#myElement").animateTransform("rotate(180deg)", 750, function(){ 
    console.log("animation completed after 750ms"); 
});

來源

2017-04-13 17:01:21

有哪些，這可以通過使用jQuery animate實現一種有趣的方式方法以一種獨特的方式，您可以在JavaScript對象上調用animate方法來描述from值，然後將第一個參數作爲第一個參數傳遞給另一個js對象w它描述了to值，以及一個step函數，該函數根據前面描述的值處理動畫的每個步驟。

實例 - 動畫變換`translateY`：

var $elm = $('h1'); // element to be moved 
 

 
function run(v){ 
 
    // clone the array (before "animate()" modifies it), and reverse it 
 
    var reversed = JSON.parse(JSON.stringify(v)).reverse(); 
 
    
 
    $(v[0]).animate(v[1], { 
 
     duration: 500, 
 
     step: function(val) { 
 
      $elm.css("transform", `translateY(${val}px)`); 
 
     }, 
 
     done: function(){ 
 
      run(reversed) 
 
     } 
 
    }) 
 
}; 
 

 
// "y" is arbitrary used as the key name 
 
run([{y:0}, {y:80}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>jQuery animate <pre>transform:translateY()</pre></h1>

來源

2017-08-24 08:48:21 vsync

如何動畫CSS翻譯

回答

實例 - 動畫變換translateY：

相關問題

實例 - 動畫變換`translateY`：