Czy istnieje framework javascript, który używa CSS3 Transitions dla efektów takich jak zmiana krycia lub elementów ruchomych, ale wróci do używania javascript setInterval/setTimeout, jeśli nie jest obsługiwany?CSS3 przejścia z JavaScript Fallback
Odpowiedz
Sprawdź moduł przejściowy YUI 3, to właśnie to robi.
Można przyjrzeć przy użyciu http://www.modernizr.com/
że wygląda dobrze wykrywać wsparcie dla przemian. Zauważyłem też, że mootools ma: http://mootools.net/docs/core/Fx/Fx.Tween i http://mootools.net/forge/p/fx_tween_css3 – benmmurphy
Modernizor to najbardziej efektywny sposób sprawdzania funkcji w danym momencie a przy 3kb jest naprawdę lekki (w porównaniu z Mootools). – Jeepstone
LOL oczywiście Modernizr jest mniejszy niż MooTools, jest to zestaw wykrywaczy, a nie framework do manipulacji domem, abstrakcja klasy i skrypty serveride – rgb
Zapoznaj się z Addy Osmani's article. Jest to dobre podsumowanie dotychczasowych rozwiązań z jQuery, w szczególności:
- jquery.transition.js przez Louis-Rémi Babe
- jQuery.animate-enhanced.js Ben Barnett
Podsumowując, istnieje kilka wtyczek dla dużych ramy (zobacz inne odpowiedzi):
Inne ramy już używać w miarę możliwości przejścia CSS:
Czy są jakieś mikro-biblioteki?
Niestety żadna z tych alternatyw nie wydaje się pozwalać na korzystanie z wygłupów, takich jak odbicie.
Moja próba użycia funkcji animate-enhanced przesunęła element o cal, a następnie po prostu go usunąłem. Naprawdę chciałbym zachować odbicie, a nie tylko sześcienne lub liniowe rozluźnienie.
Jeden z moich kolegów napisał mikro biblioteki oferują ograniczony JS przełączenie na Transitions: http://blogs.msdn.com/b/eternalcoding/archive/2011/12/06/css3-transitions.aspx
TRANSITIONSHELPER.computeCubicBezierCurveInterpolation = function (t, x1, y1, x2, y2) {
// Extract X (which is equal to time here)
var f0 = 1 - 3 * x2 + 3 * x1;
var f1 = 3 * x2 - 6 * x1;
var f2 = 3 * x1;
var refinedT = t;
for (var i = 0; i < 5; i++) {
var refinedT2 = refinedT * refinedT;
var refinedT3 = refinedT2 * refinedT;
var x = f0 * refinedT3 + f1 * refinedT2 + f2 * refinedT;
var slope = 1.0/(3.0 * f0 * refinedT2 + 2.0 * f1 * refinedT + f2);
refinedT -= (x - t) * slope;
refinedT = Math.min(1, Math.max(0, refinedT));
}
// Resolve cubic bezier for the given x
return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
Math.pow(refinedT, 3);
};
Może to wystarczy lub dobre podstawy, aby osiągnąć to, co szukasz?
Bye,
David
- 1. Podkreślenie przejścia css3
- 2. Zdarzenie kliknięcia przejścia CSS3
- 3. Płynne przejście przejścia CSS3?
- 4. Fallback dla css3 wielu obrazów tła?
- 5. CSS3 przejścia dynamicznie tworzone elementy
- 6. Zdarzenie przejścia CSS3 Odbiornik z jQuery
- 7. Wyłącz/wyłącz odziedziczone przejścia CSS3
- 8. CSS3 transformacje i przejścia (Webkit)
- 9. Dlaczego CSS3 przejścia na wysokości nie działa
- 10. Przejścia CSS3 chcą dodać kolor i zaniknąć.
- 11. Jak odtwarzać przejścia CSS3 w pętli?
- 12. Fallback image and timeout - Treść zewnętrzna. JavaScript
- 13. Wykryj obsługę przejścia z JavaScriptem
- 14. Wyłącz przejścia funkcji CSS3 w Bootstrap na paskach postępu
- 15. Modernizacja Yepnope Css Fallback
- 16. Czy jest możliwe uzyskanie docelowej wartości właściwości css podczas przejścia css3 w JavaScript?
- 17. CSS3 Transitions - dodanie 2 różnych przejścia do tego samego elementu
- 18. Przejścia CSS3: czy istnieje opcja kliknięcia bez używania JQuery?
- 19. Jak usunąć opóźnienie w Css3 Wysunięcie przejścia, które używa przejścia o maksymalnej wysokości
- 20. Różne czasy przejścia css3 dla stanu "do" i "powrotu"
- 21. Czy właściwość tła RGBA nie jest obsługiwana przez przejścia CSS3?
- 22. Webpack. Theming fallback
- 23. Implementowanie History.js HTML4 Fallback
- 24. Konwersja animacji CSS3 na czysty JavaScript
- 25. Wdrożenie fallback za pomocą obietnic
- 26. JavaScript display none after CSS3 animation
- 27. Wyłącz animację CSS3 z jQuery?
- 28. Suwak JavaScript nie działa poprawnie z końcem przejścia
- 29. Animacje i przejścia CSS3 - czy przeglądarki lepiej radzą sobie z animacją tła graficznego lub elementów DOM?
- 30. Rozpocznij animację CSS3 przy użyciu Javascript z zdarzeniem onclick
Proste przejście YUI3: YUI(). Użycie ("węzeł", "przejście", funkcja (Y) {Y.one ("# mynode"). Przejście (nieprzezroczystość: 0);}); – PottyBert
lol to proste?powinieneś sprawdzić prosty jquery ... ponieważ to nie jest proste w porównaniu do Jquery'ego. –
tak, to proste. Zawiera również piaskownicę YUI, która zapobiega zewnętrznym zakłóceniom twojego kodu – PottyBert