CSS3 Transition Polyfill
Хорошо, так что большинство из вас знакомы с переходами CSS3, я предпочитаю это выше анимации jQuery, так как она имеет простоту CSS. Я сожалею только о том, что он не работает в IE < 9(как всегда), а также в Firefox < 4, Safari < 4 и т. Д. Я не имею в виду написание отдельных анимаций в JavaScript только для IE. Но я хочу решение, которое будет сканировать CSS, захватывать скорость анимации, какие свойства нужно анимировать, и анимировать их (используя jQuery или что-то еще), есть ли такое решение, если да, то что это и где можно Я получаю это?
4 ответа
Можно определить поддерживаемые свойства CSS при условии, что вы заранее знаете, какие префиксы поставщика браузера вам необходимо найти. Я написал суть для механизма:
https://gist.github.com/1096784
cssSandpaper - это библиотека JS, которая предназначена для синтаксического анализа CSS и динамической реализации полизаполнений для различных эффектов CSS3:
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Существует также библиотека jQuery, которая работает в обратном порядке и по возможности тихо реализует переходы, когда вы вызываете $.animate ():
К сожалению, большинство браузеров отбрасывают любые неподдерживаемые объявления CSS при рендеринге страниц. Это означает, что если браузер не поддерживает данную функцию CSS, вы не сможете просматривать элементы style свойства и увидеть запись таблицы стилей этой функции, даже если она была в вашем файле CSS.
IE является исключением из этого, поэтому полифилы, такие как CSS3Pie, могут работать, но я не верю, что какой-либо другой браузер дает вам какой-либо видимость CSS-объявлений, которые они отбросили, поэтому решение Javascript также должно быть загрузите сам файл CSS в виде обычного текста и повторно проанализируйте его, прежде чем он даже начал реально реализовывать эту функцию.
Следствием этого является то, что то, что вы запрашиваете, вероятно, будет слишком тяжелым для браузера, чтобы стоить усилий (особенно с учетом того, что мы говорим о старых версиях, которые в любом случае медленнее).
Этот вопрос о SO задавал почти то же самое более года назад. Тогда не было никакого ответа, и я не думаю, что все еще есть.
Был плагин JQuery, упомянутый в ответе, хотя, который делает то, что вы хотите, но в обратном порядке (то есть вы должны запускать его как скрипт во всех браузерах, но он использует функцию CSS внутри скрипта, если он доступен). Думаю, это самое близкое, что вы получите.
Методы addClass/removeClass класса jQueryUI (не регулярно!) Могут анимировать свойства класса.
var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };
$(".selector").addClass("someclass", transitionOptions);
Попробуйте eCSStender: http://ecsstender.org/extensions/css3-transitions/index.html Мы использовали это для относительно простого, чтобы показать / скрыть элемент.