SVG Icon animation

Uses xjs.draw() to animate the ring + mark strokes, and a spring entrance to mimic SweetAlert-like feedback.

Controls

JavaScript

HTML

CSS

xjs.layer({
  title: 'Success',
  text: 'SVG draw + spring',
  icon: 'success',
  iconAnimation: true,
  popupAnimation: true
});

<label><input type="checkbox" checked> iconAnimation</label>
<label><input type="checkbox" checked> popupAnimation</label>

/* Icon styling lives inside layer.js */

功能说明：本页专门验证 Layer 的 icon 动画：描边（draw）+ 弹性缩放（spring）。你可以关闭其中任意一项来对比体验。

iconAnimation popupAnimation closeOnEsc

Tip: open “Error” to see the two stroke segments staggered.

Layer