UI › LAYER
ICON ANIMATION

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 entrance',
  icon: 'success',
  iconAnimation: true,
  popupAnimation: true,
  closeOnEsc: true
});
<label><input id="optIcon" type="checkbox" checked> iconAnimation</label>
<label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
<label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>

<button class="btn success" type="button" onclick="openDemo('success')">Success</button>
<button class="btn error" type="button" onclick="openDemo('error')">Error</button>
<button class="btn warning" type="button" onclick="openDemo('warning')">Warning</button>
<button class="btn info" type="button" onclick="openDemo('info')">Info</button>
<button class="btn" type="button" onclick="openDemo('question')">Question</button>
/* Icon styling lives inside layer.js */
功能说明:本页专门验证 Layer 的 icon 动画:描边(draw)+ 弹性缩放(spring)。你可以关闭其中任意一项来对比体验。
Tip: open “Error” to see the two stroke segments staggered.
Previous
Next