Question

我正在尝试通过绘制圆形/圆环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;
  }
}

由于

安东

Answer 1

您的代码存在一些问题。

引起你主要问题的是这一行：

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

单击关闭按钮后会立即隐藏SVG。所以你不会看到“取消画”动画。

我认为你的意思是：

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

修复后，您可以找出关闭动画无效的原因。

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

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

单击SVG CSS动画绘制和擦除

1 个答案: