Question

我制作了一个SVG动画来绘制路径，我使用了常见的笔触dashoffset技术：

.animate svg path {
    fill-opacity: 0;
    stroke: #848484;
    stroke-width: 1;
    stroke-dasharray: 7200;
    stroke-dashoffset: 7200;
    animation: draw 60s linear 1 forwards;
    -webkit-animation: draw 60s linear 1 forwards;
}

并使用@keyframes如下：

@keyframes draw {
   0% {
     stroke-dashoffset: -7200;
   }
   100%{
     stroke-dashoffset: 0;
   }
  }

@-webkit-keyframes draw {
  0% {
    stroke-dashoffset: -7200;
  }
  100%{
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  0% {
    stroke-dashoffset: -7200;
   }

  100%{
      stroke-dashoffset: 0;
   }

 }

我的持续时间为60秒，因为SVG是一个包含大量细节（窗口等）的建筑图，所以为了获得很酷的绘图效果，我必须在很长的时间内完成它以便在绘制时花费时间建筑大纲。

不要担心访客在60秒内看不到它，4秒后真实图像会隐藏绘画效果。

预览：http://media-clouds.com/ccc/#intro/buildings（这是第二页 - 在Firefox中打开它看到它）

奇怪的是，它在3天前完美运行，非常顺畅和凉爽，一切都很好！我甚至通过技术性地将绘图跳转到4秒后的最后一帧（当真实图像开始淡入时）来增强页面性能，如下所示：

@keyframes draw {
   0% {
     stroke-dashoffset: -7200;
   }
7%{
    stroke-dashoffset: 0;
 }
   8%{
     stroke-dashoffset: 7200;
   }
 100%{
     stroke-dashoffset: 7200;
   }
  }

突然今天它崩溃了！我不断调整关键帧规则，拼命试图解决问题，即使持续3秒，也会崩溃！（有时候没有!!!）

希望你能帮助我

更新

我做了一个解决方法，使它工作，在JavaScript中我添加了类.animate，它在CSS中具有绘制效果规则。然后我在浏览器崩溃之前删除了这个类（在我的情况下它在动画的最后一帧崩溃）

以下是代码作为参考：

$(this).addClass("animate").delay(3000).queue(function(){

    $(this).removeClass("animate").dequeue();

});

这只是一种解决方法，而不是从根本上治愈错误的有效解决方案。

Svg绘制动画导致chrome中的页面崩溃（Aw，Snap页面）

更新

0 个答案: