Переход CSS3 Polyfill

Хорошо, поэтому большинство из вас будут знакомы с переходами CSS3, я предпочитаю его над анимациями jQuery, поскольку он имеет простоту CSS. Мое единственное сожаление в том, что он не работает в IE < 9 (как всегда), а также Firefox < 4, Safari < 4 и т.д. Я не хочу писать отдельные анимации в JavaScript только для IE. Но я хочу, чтобы решение, которое сканировало CSS, хватало бы скорость анимации, какие свойства должны были быть анимированы и анимировать их (используя jQuery или что-то еще), есть ли такое решение, если да, что это такое и где можно Я получаю его?

Ответ 1

Возможно обнаружение поддерживаемых свойств CSS, если вы заранее знаете, какие префиксы для браузеров вам нужны, чтобы понюхать. Я написал суть механизма:

https://gist.github.com/1096784

cssSandpaper - это библиотека JS, которая нацелена на синтаксический анализ CSS и динамическое внедрение политик для различных эффектов CSS3:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Существует также библиотека jQuery, которая работает в обратном порядке и тихо реализует переходы, когда это возможно, когда вы вызываете $.animate():

https://github.com/louisremi/jquery.transition.js

Ответ 2

К сожалению, большинство браузеров бросают любые неподдерживаемые объявления CSS при рендеринге страниц, что означает, что если браузер не поддерживает данную функцию CSS, вы не сможете посмотреть свойство элемента style и посмотреть, что элемент stylesheet, даже если он был в вашем файле CSS.

IE является исключением из этого, поэтому полиполки, такие как CSS3Pie, могут работать, но я не верю, что какой-либо другой браузер дает вам видимость объявлений CSS, которые они удалили, поэтому для решения Javascript также потребуется для перезагрузки самого файла CSS в виде обычного текста и повторного анализа его, прежде чем он даже начал фактически реализовывать эту функцию.

Следствием этого является то, что то, о чем вы просите, вероятно, будет слишком тяжелым в браузере, чтобы приложить все усилия (особенно, поскольку мы говорим о более старых версиях, которые все равно медленнее).

Этот вопрос на SO просил почти то же самое, более года назад. Тогда ответа не было, и я не думаю, что все еще есть.

В ответ был включен плагин JQuery, но он делает то, что вам нужно, но наоборот (т.е. вам нужно запустить его как script во всех браузерах, но он использует функцию CSS в script, если доступно). Думаю, что ближе всего вы собираетесь добраться.

Ответ 3

Попробуйте eCSStender: http://ecsstender.org/extensions/css3-transitions/index.html Мы использовали это для относительно простого, чтобы показать/скрыть элемент.

Ответ 4

addClass/removeClass методы jQueryUI (не регулярные!) могут анимировать свойства класса.

var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };

$(".selector").addClass("someclass", transitionOptions);