嵌套的CSS3旋转动画在IE11中无效

时间：2016-11-17 18:24:54

标签： css3 css-transitions internet-explorer-11

我被困住了。我试图在IE11上使用嵌套旋转动画，但我尝试过的任何内容都没有在我的网站上运行。

我花了很多时间尝试Stack Overflow和其他网站上列出的不同修补程序。我试图让我的等待面板中的徽标在外部div旋转时保持水平。这适用于Chrome，Safari，Edge和Firefox。只是不在IE 11中（我不关心旧版本的IE）。

如图所示，即使在IE11中，外部div也会旋转，并且进度叠加按预期工作。但是内部div上的ccw关键帧（封装了徽标和进度叠加层）不起作用。

这是IE11中的样子 IE11

在其他浏览器中看起来像什么。 Others

我为此设置了一个小提琴，并在Safari和IE11上进行了测试。令我惊讶的是，小提琴有效！问题是，我不知道为什么。我怀疑小提琴网站有一些代码来处理IE中的怪癖，这也是我的小提琴。

Fiddle

在我的生产网站上，我将这个等待面板放在一个bootstrap模式中，所以在差异之中，有自举库，bootstrap css，模态标记和现代化器。我只是不知道这些会如何干扰ccw关键帧动画而不会影响叠加动画。

Actual Website

我在这一点上完全感到困惑。它不像动画根本不起作用，只是ccw关键帧无法正常工作。有趣的是，如果我删除了cw关键帧，那么ccw就可以了。

CSS 

.waitPanel {
  overflow: hidden;
}

@keyframes cw {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ccw {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes progress {
  0% {
    width: 0;
  }
  8% {
    width: 50px;
  }
  16% {
    width: 75px;
  }
  90% {
    width: 95px;
  }
  100% {
    width: 105px;
    border-radius: 10px;
  }
}

.carrierLoading {
  width: 110px;
  height: 60px;
  position: absolute;
  -webkit-animation: ccw 10s linear infinite;
  -moz-animation: ccw 10s linear infinite;
  -ms-animation: ccw 10s linear infinite;
  -o-animation: ccw 10s linear infinite;
  animation: ccw 10s linear infinite;
}

.carrierLogos {
  width: 250px;
  margin: 50px auto;
  height: 250px;
  position: relative;
  -webkit-animation: cw 10s linear infinite;
  -moz-animation: cw 10s linear infinite;
  -ms-animation: cw 10s linear infinite;
  -o-animation: cw 10s linear infinite;
  animation: cw 10s linear infinite;
}

.carrierLoading .bullet {
  width: 40px;
  height: 40px;
  left: 35px;
  top: 0;
  position: absolute;
  font-size: 40px;
}

.carrierLoaded .overlay {
  position: absolute;
  top: 8px;
  left: 0;
  width: 0;
  background: rgba(0, 255, 0, .3);
  height: 46px;
  bottom: 8px;
  border-radius: 10px 0 0 10px;
  -webkit-animation: progress 60s linear 1s infinite;
  -moz-animation: progress 60s linear 1s infinite;
  -ms-animation: progress 60s linear 1s infinite;
  -o-animation: progress 60s linear 1s infinite;
  animation: progress 60s linear 1s infinite;
}

.carrierLoaded .bullet {
  display: none;
}

HTML 

<div id="Searching" title="Please Wait" style="text-align: center;">
  <div class="waitPanel">
    <p>Please wait while we lookup your insurance rates. This may take a few minutes.</p>
    <!--
    <p><img src="/DemoAgent/Images/indicators/progress.gif" alt="Please Wait"/></p>
    -->
    <div class="carrierLogos">
      <div class="carrierLoading " style="left: 195px; top: 95px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10865.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 175px; top: 163px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/UNITR.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 122px; top: 209px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPRE.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 52px; top: 219px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/B4249.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -12px; top: 189px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/GRNG.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -50px; top: 130px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10031.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -50px; top: 60px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10864.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: -12px; top: 1px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/PROGR.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 52px; top: -29px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPIO.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 122px; top: -19px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/KWPAT.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
      <div class="carrierLoading " style="left: 175px; top: 27px;">
        <img src="http://www.demoagent.com/DemoAgent/Images/carriers/10730.gif">
        <div class="bullet">•</div>
        <div class="overlay"></div>
      </div>
    </div>
  </div>

</div>

JAVASCRIPT 

 (function($) {
   $(function() {
     $('.carrierLoading img').load(function() {
       $(this).closest('.carrierLoading').addClass('carrierLoaded');
     }).each(function() {
       if ($(this).prop('complete')) {
         $(this).trigger('load');
       }
     });
     //animateSelector('.carrierLoading');
     circleSelector('.carrierLoading');
   });
 })(jQuery);

 // arranges logos along a circular path.
 // if width is less than 85, move logos randomly, otherwise
 // rotate the circle (see css animations).
 function circleSelector(selector) {
   var fields = $(selector);
   var height = $('.carrierLogos').height();
   var width = $('.carrierLogos').width();
   var radius = Math.min(height, width) / 2;
   if (radius < 85) {
     $('.carrierLogos, .carrierLoading, .carrierLoaded').css('animation', 'none');
     animateSelector('.carrierLoading, .carrierLoaded');
     return;
   }
   var angle = 0;
   var step = (2 * Math.PI) / fields.length;
   fields.each(function() {
     var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
     var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
     $(this).css({
       left: x + 'px',
       top: y + 'px'
     });
     angle += step;
   });
 }

 function makeNewPosition() {
   // Get viewport dimensions (remove the dimension of the div)
   var h = $('.carrierLogos').height() - 60;
   var w = $('.carrierLogos').width() - 110;

   var nh = Math.floor(Math.random() * h);
   var nw = Math.floor(Math.random() * w);
   return [nh, nw];

 }

 // moves logos randomly
 function animateSelector(selector) {
   $(selector).each(function() {
     var newq = makeNewPosition();
     var oldq = $(this).offset();
     var speed = calcSpeed([oldq.top, oldq.left], newq);

     $(this).animate({
       top: newq[0],
       left: newq[1]
     }, speed, function() {
       animateSelector(this);
     });
   });

 };

 function calcSpeed(prev, next) {

   var x = Math.abs(prev[1] - next[1]);
   var y = Math.abs(prev[0] - next[0]);
   var greatest = x > y ? x : y;
   var speedModifier = 0.1;
   var speed = Math.ceil(greatest / speedModifier);
   return speed;

 }

1 个答案:

答案 0 :(得分：1)

我找到了解决方法。延迟动画直到页面加载了一些时间。增加一点延迟似乎始终如一。我还删除了特定于供应商的标记。对于我所定位的所有浏览器，这都是不必要的。

.carrierLoading {
  ...
  /* animation: ccw 10s linear infinite; */
}

.carrierLogos {
  /* animation: cw 10s linear infinite;*/
}

$(window).load(function () {
    setTimeout(function () {
        $('.carrierLoading').css('animation', 'ccw 10s linear infinite');
        $('.carrierLogos').css('animation', 'cw 10s linear infinite');
    },1000);
});

我仍然对一个不依赖于时间正常工作的答案感兴趣。

相关问题
最新问题