当前位置 : 首页 » 互动问答 » 正文

CSS动画在IE / Edge中不起作用

分类 : 互动问答 | 发布时间 : 2017-10-25 08:23:34 | 评论 : 2 | 浏览 : 101 | 喜欢 : 0

这个东西在IE / Edge中如何工作?我不明白为什么它没有。

当我向一个元素添加一个类时,它的边框变成了虚线并开始旋转。

 $(“#btn”)。click(function(){
  $( “BG ”)[0] .classList.toggle(“ 旋转”);
})
 @keyframes PDFgenerating {
  至 {
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
.bg圈{
  补:白色;
  中风:蓝色;
}
.bg圈{
  -moz-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  -o-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  -webkit-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  转变:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  stroke-dasharray:290!important;
}

.bg.rotate circle {
  -moz-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  -o-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  -webkit-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  转变:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
  -moz-animation:PDF生成线性5s无限反转;
  -o-animation:PDF生成线性5s无限反转;
  -webkit-animation:生成线性5s无限逆向;
  动画:PDF生成线性5s无限逆转;
  stroke-dasharray:28!important;
  -moz-transform-origin:center;
  -ms-transform-origin:center;
  -o-transform-origin:center;
  -webkit-transform-origin:center;
  transform-origin:center;
} 
 <script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”> </ script>
<div class =“myIcon”style =“width:100px”> <svg viewBox =“0 0 100 100”focusable =“false”> <g class =“bg”> <circle cx =“50”cy =“50 “r =”45.56“style =”stroke-width:4.44; stroke-linecap:butt; stroke-miterlimit:4; stroke-dasharray:none; stroke-dashoffset:0“> </ circle> </ g> <g class =“fg”transform =“translate(50,50)scale(0.5)translate(-50,-50)”> <g transform =“matrix(0.19920319,0,0,0.19920319,2.5095651e-4,-1.38 e-6)<g> <路径d =“m 478.482,448.601 -101.6,-101.599 c 8.089,-15.262 12.339,-32.29 12.339,-49.717 0,-35.689 -18.182,-69.164 -47.804,-88.743 V 92.53 c 0,-2.652 -1.054,-5.196 -2.929,-7.071 L 255.959,2.929 C 254.083,1.054 251.54,0 248.888.0 H 24.371 c -5.522.0 -10.4.477 -10.10 v 427.735 c 0 ,5.523 4.478,10 10,10小时307.046 c 5.522,0 10,-4.477 10,-10 v -37.722 l 92.825,92.825 c 5.908,5.908 13.764,9.162 22.119,9.162 8.356,0 16.212,-3.254 22.12,-9.162 12.197,-12.196 12.197,-32.041 0.001,-44.237 z M 307.276,82.53 H 258.889 V 34.143 l 24.193,24.193 24.194,24.194 zm 14.141,313.847 v 31.358 H 34.371 V 20 h 20 4.517 v 72.53 c 0,5.523 4.478,10 10,10 h 72.529 v 95.662 l 0.009,0.014 c -12.214,-4.741 -25.275,-7.215 -38.499,-7.215 -58.61,0 -106.294,47.683 -106.294,106.293 0 ,58.61 47.684,106.293 106.294,106.293 13.224,0 26.285,-2.474 38.499,-7.215 1 -0.009,0.015 zm 7.531,-26.086 c -0.848,0.536 -1.706,1.057 -2.574,1.563 -13.131,7.67 -28.154,11.724 -43.446,11.724 -47.583,0 -86.294,-38.711 -86.294,-86.293 0,-47.582 38.711,-86.293 86.294,-86.293 15.291,0 30.315,4.054 43.447,11.724 26.428,15.435 42.846,44.008 42.846,74.569 0, 16.35 -4.595,32.264 -13.289,46.022 -6.835,10.818 -16.166,20.148 -26.984,26.984 zm 135.391,108.405 c -2.131,2.131 -4.964,3.304 -7.978,3.304 -3.014,0 -5.847,-1.173 -7.977, -3.304 l -98.706,-98.706 -0.008,-0.001 c 5.856,-4.74 11.221,-10.104 15.961,-15.96 l 0.001,0.008 98.707,98.707 c 4.398,4.398 4.398,11.554 0,15.952 z <> </ path> <路径d =“m 246.838,238.403 c -20.641,12.674 -32.964,34.686 -32.964,58.882 0.5,523 4.478,10 10,10 5.522,0 10 -4.477 10 -10 0 -17.19 8.759 -32.83 23.429,-41.838 4.707,-2.89 6.179,-9.048 3.289,-13.754 -2.89,-4.707 -9.048,-6.18 -13.754,-3.29 z <> <路径d =“m 317.708,237.624 c -10.52,-6.145  - 22.547,-9.392 -34.781,-9.392 -5.522,0 -10,4.477 -10,10 0,5.523 4.478,10 10,10 8.693,0 17.232,2.304 24.693,6.662 1.586,0.926 3.321,1.367 5.034,1.367 3.438, 0 6.785,-1.775 8.645,-4.958 2.786,-4.77 1.178,-10.894 -3.591,-13.679 z <> </ path> </ g> </ g> </ g> </ svg> </ div>
点击
<button id =“btn”> animate </ button> 

我已经尝试在trasform-origin中使用%,并在关键帧中使用0%和100%,这在一些非常相似的问题中可以找到。

回答(2)

  • 2楼
  • $(“#btn”)。click(function(){
      $( “BG ”)[0] .classList.toggle(“ 旋转”);
    })
     @keyframes PDFgenerating {
      从{
        stroke-dashoffset:0;
      }
      至 {
        stroke-dashoffset:500;
      }
    }
    .bg圈{
      补:白色;
      中风:蓝色;
    }
    .bg圈{
      -moz-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      -o-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      -webkit-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      转变:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      stroke-dasharray:290!important;
    }
    
    .bg.rotate circle {
      -moz-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      -o-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      -webkit-transition:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      转变:stroke-dasharray cubic-bezier(0.4,0,0.2,1).7s;
      -moz-animation:PDF生成线性5s无限;
      -o-animation:PDF生成线性5s无限;
      -webkit-animation:PDF生成线性5s无限;
      动画:PDF生成线性5s无限;
      stroke-dasharray:28!important;
      -moz-transform-origin:center;
      -ms-transform-origin:center;
      -o-transform-origin:center;
      -webkit-transform-origin:center;
      transform-origin:center;
    } 
     <script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”> </ script>
    <div class =“myIcon”style =“width:100px”> <svg viewBox =“0 0 100 100”focusable =“false”> <g class =“bg”> <circle cx =“50”cy =“50 “r =”45.56“style =”stroke-width:4.44; stroke-linecap:butt; stroke-miterlimit:4; stroke-dasharray:none; stroke-dashoffset:0“> </ circle> </ g> <g class =“fg”transform =“translate(50,50)scale(0.5)translate(-50,-50)”> <g transform =“matrix(0.19920319,0,0,0.19920319,2.5095651e-4,-1.38 e-6)<g> <路径d =“m 478.482,448.601 -101.6,-101.599 c 8.089,-15.262 12.339,-32.29 12.339,-49.717 0,-35.689 -18.182,-69.164 -47.804,-88.743 V 92.53 c 0,-2.652 -1.054,-5.196 -2.929,-7.071 L 255.959,2.929 C 254.083,1.054 251.54,0 248.888.0 H 24.371 c -5.522.0 -10.4.477 -10.10 v 427.735 c 0 ,5.523 4.478,10 10,10小时307.046 c 5.522,0 10,-4.477 10,-10 v -37.722 l 92.825,92.825 c 5.908,5.908 13.764,9.162 22.119,9.162 8.356,0 16.212,-3.254 22.12,-9.162 12.197,-12.196 12.197,-32.041 0.001,-44.237 z M 307.276,82.53 H 258.889 V 34.143 l 24.193,24.193 24.194,24.194 zm 14.141,313.847 v 31.358 H 34.371 V 20 h 20 4.517 v 72.53 c 0,5.523 4.478,10 10,10 h 72.529 v 95.662 l 0.009,0.014 c -12.214,-4.741 -25.275,-7.215 -38.499,-7.215 -58.61,0 -106.294,47.683 -106.294,106.293 0 ,58.61 47.684,106.293 106.294,106.293 13.224,0 26.285,-2.474 38.499,-7.215 1 -0.009,0.015 zm 7.531,-26.086 c -0.848,0.536 -1.706,1.057 -2.574,1.563 -13.131,7.67 -28.154,11.724 -43.446,11.724 -47.583,0 -86.294,-38.711 -86.294,-86.293 0,-47.582 38.711,-86.293 86.294,-86.293 15.291,0 30.315,4.054 43.447,11.724 26.428,15.435 42.846,44.008 42.846,74.569 0, 16.35 -4.595,32.264 -13.289,46.022 -6.835,10.818 -16.166,20.148 -26.984,26.984 zm 135.391,108.405 c -2.131,2.131 -4.964,3.304 -7.978,3.304 -3.014,0 -5.847,-1.173 -7.977, -3.304 l -98.706,-98.706 -0.008,-0.001 c 5.856,-4.74 11.221,-10.104 15.961,-15.96 l 0.001,0.008 98.707,98.707 c 4.398,4.398 4.398,11.554 0,15.952 z <> </ path> <路径d =“m 246.838,238.403 c -20.641,12.674 -32.964,34.686 -32.964,58.882 0.5,523 4.478,10 10,10 5.522,0 10 -4.477 10 -10 0 -17.19 8.759 -32.83 23.429,-41.838 4.707,-2.89 6.179,-9.048 3.289,-13.754 -2.89,-4.707 -9.048,-6.18 -13.754,-3.29 z <> <路径d =“m 317.708,237.624 c -10.52,-6.145  - 22.547,-9.392 -34.781,-9.392 -5.522,0 -10,4.477 -10,10 0,5.523 4.478,10 10,10 8.693,0 17.232,2.304 24.693,6.662 1.586,0.926 3.321,1.367 5.034,1.367 3.438, 0 6.785,-1.775 8.645,-4.958 2.786,-4.77 1.178,-10.894 -3.591,-13.679 z <> </ path> </ g> </ g> </ g> </ svg> </ div>
    点击
    <button id =“btn”> animate </ button> 

    这可能是没有css转换的替代方法,但仍然不适用于IE / Edge。

相关阅读: