Один из способов - проверить у элемента наличие нужного свойства с префиксом (или без):
function getTransformType() {
var div = document.createElement('div');
var types = ['transform', 'MozTransform', 'WebkitTransform', 'какие там еще нужны'];
for (var i = 0; i < types.length; ++i) {
if (typeof div.style[types[i]] != 'undefined') {
return types[i];
}
}
return null;
}
jQuery
делает проверку похожим образом. Там хранится массив:
cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];
Перед тем как применять на элементе свойство, там выполняется поиск правильного имени:
// Return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {
// Shortcut for names that are not vendor prefixed
if ( name in style ) {
return name;
}
// Check for vendor prefixed names
var capName = name[0].toUpperCase() + name.slice(1),
origName = name,
i = cssPrefixes.length;
while ( i-- ) {
name = cssPrefixes[ i ] + capName;
if ( name in style ) {
return name;
}
}
return origName;
}
Эта функция возвращает "правильное" свойство. Суть точно такая же как я описал выше. Окончательно имя свойства там выбирается так:
name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );
То есть они кэшируют запросы, чтобы каждый раз не тестить, на необходимость префикса.
transition
указываете в CSS, верно? По крайне мере, я так делаю для angular анимации.jqLite
(angular.element
), там анимация посложнее и сделано не через angular анимацию.jQuery
использован примерно такой же метод как и у меня в ответе, просто я его упростил для частного случая. Ответ дополнил описанием того как это делается вjQuery
.