Чтение свойств CSS3 с помощью jQuery в Internet Explorer - PullRequest
1 голос
/ 19 февраля 2012

Я работаю над слайд-шоу в формате HTML5 с откатом jQuery, и у меня возникла небольшая проблема.Мне нужно найти значение transition-duration из #containter во всех браузерах, особенно в Internet Explorer, поскольку ни одна версия не поддерживает переходы CSS3.

Я использую этот бит jQuery для этого, но он не работает в IE:

$('#container').css('transition-duration')

Есть ли способ сделать это?Я думаю, проблема в том, что IE даже не загружает значение CSS, так как оно не поддерживается.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2012

Я писал об этом недавно здесь: http://focalstrategy.com/blog/2010/08/howto/an-animated-image-slider-that-works-in-internet-explorer/.

Моя техника состояла в том, чтобы инициировать переходы с помощью JS, упрощая установку значений времени в вашем JS.

Если вы хотите прочитать свойства, вам нужно загрузить таблицу стилей через XHR, а затем проанализировать ее. Это неприятно, потому что для того, чтобы сделать его более надежным, вам нужно проанализировать html страницы, чтобы получить все таблицы стилей, и убедиться, что вы соблюдаете любые медиа-запросы и операторы @import. Вам также необходимо убедиться, что вы следуете каскаду и учитываете специфику.

Я бы сделал это так, как я это сделал, он гораздо более гибкий и все еще обладает всеми преимуществами переходов CSS3.

0 голосов
/ 20 февраля 2012

Internet Explorer не поддерживает свойство перехода. Посмотрите на это:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

От: http://www.w3schools.com/css3/css3_transitions.asp

Но я только что нашел это:

-ms-transition-property,
-ms-transition-duration, 
-ms-transition-timing-function, 
-ms-transition-delay

С http://msdn.microsoft.com/en-us/library/windows/apps/hh466382.aspx

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...