IE: матричные преобразования через jquery и css - PullRequest
0 голосов
/ 08 ноября 2010

Я применяю некоторую изящную, но базовую анимацию для div и графики через jquery и использую плагин 2d transform для этого, который должен получить доступ к матричному фильтру IE, чтобы выполнить то, что другие браузеры делают естественным образом. Моя проблема в том, что после вызова анимации предыдущий css, установленный с помощью таблицы стилей ИЛИ, неявно установленный с помощью jquery / javascript, игнорируется после манипулирования матричным фильтром.

Панель разработчика IE показывает эту строку на изображении на экране разработчика после завершения анимации:

progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); ZOOM: 1; TOP: 0px; LEFT: 0px

(что top:0 и left:0 должны сказать left:91px; и top:-9px;, как это происходит в FF и Safari)

мой jquery как раз перед этим:

function stage2() {
  $("#cs_content2ClipStage3").animate({left:-355},200, function() {
  $('#cs_zoomGhost').animate({
   scale:.56,
   left:'+=70',
   top:'-=25'},500, function() {
        //replaceZoom technique for piechart
        $("#cs_stage3HiddenPie").animate({scale:0},500, function() {
        $('#pieChart').attr('src','images/pieChart2.gif');
        $('#cs_stage3HiddenPie').animate({scale:.75}, 200);});

  $('#cs_stage3HiddenPie').show();
     $('#cs_stage2ArrowGrow').show();
  $('#cs_stage3HiddenPie').animate({scale:.8}, 500, function() {
  $('#arrowGrow').attr('src','images/arrowGrow2.gif');
    });
  });
  $("#stateGraphic").attr('src', 'images/state2_4stage.gif');
  }
 )};

Таким образом, проблема, только в IE, заключается в том, что позиции: left:'+=70' и top:'-=25' не начинаются с размещения css top:17px; и left:10px;, заданного с помощью таблицы стилей, и заканчиваются на left:91px и top:-9px;.

Элемент имеет макет, он позиционирован (пробовал как относительный, так и абсолютный), и я попытался использовать объявление !important сверху и слева, но безуспешно.

Я вижу, что преобразование применяется как встроенный стиль с другими инструментами разработчика iE8, поэтому я пытаюсь выяснить, как сказать IE .... поместите этот элемент сюда и анимируйте из этого размещения "

Кажется, я не могу понять, как установить позиционирование CSS, чтобы IE хорошо играл с анимациями.

Ответы [ 2 ]

1 голос
/ 11 декабря 2012

Возможно, вы захотите взглянуть на IE Transform Translator .

0 голосов
/ 07 января 2011
...