Имитировать переход CSS3 в IE? - PullRequest
Новая
       39

Имитировать переход CSS3 в IE?

11 голосов
/ 01 июля 2011

Я использую комбинацию правил для достижения правила CSS3 transition в качестве кросс-браузерной совместимости, насколько это возможно: я использую transition, -webkit-transition, -moz-transition и -o-transition .

Существует ли подобное свойство -ms-transition для любой версии Internet Explorer? Существует ли собственный фильтр для более старых версий IE, подобный тому, как работают следующие правила для прозрачности в IE 6-8? 

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; 
/* IE 5-7 */ 
filter: alpha(opacity=50);

Ответы [ 5 ]

12 голосов
/ 01 июля 2011

В более старых версиях IE нет какого-либо эффекта перехода.

Единственный известный мне способ приблизиться к этому - использовать методы JQuery fadeIn() и fadeOut(),которые действительно работают во всех версиях IE.

Тем не менее, я должен предупредить, что они по-прежнему противоречат общеизвестно плохой обработке непрозрачности IE.Эффекты затухания в JQuery могут иметь некоторые странные сбои при использовании с IE6-8, особенно если вы затухаете в блоке, который содержит графику.

Если вы решите попробовать его, код очень прост.Просто включите JQuery в свои заголовки, а затем: 

$('#myelement').fadeIn();

в соответствующем месте.

См. Страницу руководства JQuery FadeIn для получения дополнительной информации.

Конечно, это было бы вместо любого эффекта перехода CSS;все это делается с помощью Javascript, и вам, вероятно, придется отказаться от ваших переходов CSS3, иначе это будет конфликтовать с эффектами JQuery.Но если вы хотите, чтобы он работал с IE, это цена, которую вы заплатите.

И, как я уже сказал, остерегайтесь глюков.Протестируйте его и посмотрите, как он выглядит для вас.

Это единственный способ сделать это, поэтому, если вам действительно нужен эффект перехода в IE, это то, что вам нужно сделать, но будьте готовы принятьчто это может выглядеть не так хорошо.

Другие библиотеки Javascript, такие как Mootools или Dojo, могут иметь аналогичные эффекты, которые вы также можете попробовать, но я думаю, что если они у них есть, они будут страдать от того жевопросы.

5 голосов
/ 12 июня 2012

Я столкнулся с этим во время исследования того же вопроса: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Я также нашел библиотеку с именем move.js, которую можно использовать вместе с переходами CSS3: https://github.com/visionmedia/move.js

Надеюсь, это поможет.

3 голосов
/ 01 июля 2011

IE10 будет иметь переходы CSS3, до тех пор, пока вы не будете использовать javascript.

0 голосов
/ 03 октября 2013

для IE <10 вы можете попробовать любой из тех, кого я не пробовал лично, но они выглядят многообещающе <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="nofollow">http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ или http://addyosmani.com/blog/css3transitions-jquery/ (неработающая ссылка)

0 голосов
/ 16 января 2013

Правило перехода CSS3 и другие правила CSS3 прекрасно работают в IE 10. Префикс «-ms-» больше не требуется, но все равно будет распознаваться. Чтобы обеспечить совместимость в будущем, приложения, использующие префикс поставщика Microsoft со свойствами перехода, должны быть соответствующим образом обновлены. Итак, обновите свой CSS-код, добавьте строку с правилом, без префикса.

...