Czy można animować właściwość CSS, którą można przetłumaczyć za pomocą jquery?Jak animować CSS Przetłumaczyć
$('.myButtons').animate({"transform":"translate(50px,100px)"})
i czy działa w wielu przeglądarkach?
Demo nie działa: http://jsfiddle.net/ignaciocorreia/xWCVf/
UPDATE:
Moje rozwiązania:
$('div').css({"-webkit-transform":"translate(100px,100px)"});
To jest pomysł, ale z animacją. Czy możesz to zaktualizować? –
Wystarczy dodać przejście CSS do niego. –
@ IgnácioR.Correia - Zaktualizowany link –
Istnieje jQuery wtyczki, które pomogą Ci osiągnąć jak: http://ricostacruz.com/jquery.transit/
Spróbujmy. Chciałem tylko dodać jedną linię kodu do mojej witryny. Nie wymaga całej biblioteki. –
@ IgnácioR.Correia Jeśli szukasz rozwiązania opartego na różnych przeglądarkach, myślę, że wtyczka/biblioteka jest drogą do zrobienia. Poza tym z jQuery już korzystasz z biblioteki. – flec
Już się z tym bawię. Bardzo fajny. Działa jak marzenie. Dzięki. –
Według CanIUse powinieneś mieć go z wieloma prefiksów.
$('div').css({
"-webkit-transform":"translate(100px,100px)",
"-ms-transform":"translate(100px,100px)",
"transform":"translate(100px,100px)"
});
Od wersji jQuery 1.8 nie trzeba już określać prefiksów dostawcy. http://api.jquery.com/css/#css2 – davidgoli
Oryginalny plakat zapytał o * animację *, której ten kod nie zawiera. –
Potrzebujesz ustawić animację klatek kluczowych w swoim CSS. I użyć klatkę z 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>Niestety to nie odpowiada na oryginalne pytanie dotyczące animacji 'transform: translate()' w szczególności. –
Ja też szukałem dobrej drodze, aby to zrobić, znalazłem najlepszym sposobem było ustawić przejście na „przekształcić” nieruchomości, a następnie zmień transformację, a następnie usuń przejście.
kładę to wszystko razem w plugin jQuery
https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0
byłoby użyć kodu:
$("#myElement").animateTransform("rotate(180deg)", 750, function(){
console.log("animation completed after 750ms");
});
Jest ciekawy sposób, który może być osiągnięty za pomocą jQuery animate metoda w unikalny sposób, w której wywołuje się metodę animate w obiekcie javascript, który opisuje wartość from, a następnie przekazuje się jako pierwszy parametr inny obiekt js w hich opisuje wartość to oraz funkcję step, która obsługuje każdy krok animacji zgodnie z wartościami opisanymi wcześniej.
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>
Wezmę przypuszczenie, i powiedzieć, że to działa tylko w przeglądarkach WebKit, jeśli w ogóle! – adeneo
Znalazłem ten przykład: http://jsfiddle.net/qGEmy/7/, ale wydaje mi się, że nie działa on z moim przykładem. –
A oto jak to zrobić -> [** FIDDLE **] (http: // jsfiddle.net/adeneo/xWCVf/2 /) – adeneo