2013-03-03 3 views
0

У меня есть jsfiddle, который должен работать в IE9, но это неCSS3 в IE9

В CSS:

#MyDiv{ 
    width:150px; 
    height:150px;  
    margin:100px 100px; 
    background-color: red; 
    transition:all 2s ease; 
    -ms-transition:all 2s ease;} 

.Rotate{ 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -ms-transform: rotate(360deg);} 

Javascript:

$(document).ready(function() { AddRotate(); }); 

function AddRotate() { 

    $('#MyDiv').addClass('Rotate'); 

    setTimeout(function() { 
     RemoveRotate(); 
    }, 2000);  
} 

function RemoveRotate() { 

    $('#MyDiv').removeClass('Rotate'); 

    setTimeout(function() { 
     AddRotate(); 
    }, 2000); 
} 

И HTML: <div id="MyDiv">test</div>

Я не уверен, почему он не работает. Речь идет о создании вращения CSS с переходом; где ошибка, и как вы ее исправить, чтобы заставить ее работать в IE9?

Спасибо.

+2

[Переходы CSS] (http://caniuse.com/#feat=css-transitions) не поддерживаются в IE 9. –

+1

вне темы, но стоит отметить, что наилучшая практика CSS заключается в том, префиксная версия стиля внизу, после префиксных версий (я отмечаю, что вы получили их сверху). – Spudley

ответ

1

Переходы не поддерживаются в IE9, они поддерживаются только с IE10. См. Can I Use для получения дополнительной информации.

2

Вращение поддерживается в IE9, но переходы CSS - нет.

Вам нужно будет использовать javascript-решение.

Мое предложение состоит в использовании библиотеки CSS Sandpaper, так как это позволяет использовать стандартный CSS для ваших переходов, даже в IE, что, в свою очередь, означает, что вам не нужно переключаться на JS для других браузеров только из-за IE ,

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

Смежные вопросы