SVG CSS 动画在点击时绘制和擦除答案

【问题标题】：SVG CSS Animation draw and erase on clickSVG CSS 动画在点击时绘制和擦除
【发布时间】：2016-12-26 20:48:50
【问题描述】：

我正在尝试通过绘制一个圆形/甜甜圈 SVG 形状来创建菜单打开和关闭动画，显示一些图标，然后我将它也展开（我知道这不是一个真实的词，但它最符合描述）/菜单关闭时擦除形状并隐藏图标。

我已经绘制了形状并在打开按钮时显示图标，但无论我尝试了什么，当我尝试擦除/取消绘制它时，它就会消失。

其次，如果你再次点击打开菜单，它不会做第二轮动画。

这是我迄今为止所取得的成就的Fiddle！任何帮助将不胜感激。

 .circle_animation {
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
}

.circle_animation {
    -webkit-animation: MenuOpened 1s ease-out forwards;
    animation: MenuOpened 1s ease-out forwards;    
}


@-webkit-keyframes MenuOpened {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes MenuOpened {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes MenuClosed {
  to {
    stroke-dashoffset: 377;
  }
}

@keyframes MenuClosed {
  to {
    stroke-dashoffset: 377;
  }
}

谢谢

安东

【问题讨论】：

标签： jquery html css svg css-animations

【解决方案1】：

您的代码存在一些问题。

导致您的主要问题是这一行：

$(".MenuSVG").hide();

这会导致您的 SVG 在您单击关闭按钮后立即被隐藏。所以你不会看到“取消绘制”动画。

我想你的意思是：

setTimeout(function(){$(".MenuSVG").hide();}, 1000);

一旦修复，您就可以找出关闭动画不起作用的原因。

如果你想作弊，这里有一个工作版本：

https://jsfiddle.net/v4hw87nc/6/

【讨论】：

完美！这解决了它。谢谢