容器定义混合类型动画

function openContainerSteps() {
  if (typeof window.$ !== 'function') return;

  Layer.run({
    step: '#mix_steps',
    stepItem: '.mix-step',
    title: 'Container steps (mixed animations)',
    showCancelButton: true
  }).then((res) => {
    if (res.isConfirmed) {
      Layer.run({
        title: 'Collected data',
        icon: 'success',
        popupAnimation: false,
        replace: true,
        html: '<pre>' + JSON.stringify(res.data, null, 2) + '</pre>'
      });
    }
  });
}

<button class="btn" type="button" onclick="openContainerSteps()">Open container steps</button>

<div id="mix_steps" class="hidden-dom">
  <div class="mix-step"
       data-step-title="Step 1: Banner icon"
       data-step-icon="svg:banner"
       data-step-iwidth="10em"
       data-step-iheight="6em"
       data-step-width="520"
       data-step-height="260"
       data-step-theme="light">
    <div class="step-card">
      <div class="step-title">Welcome</div>
      <div class="step-desc">This step uses a Lottie SVG icon with custom icon box size.</div>
      <div class="field">
        <label>Your name</label>
        <input name="name" placeholder="Input will be collected">
      </div>
    </div>
  </div>

  <div class="mix-step"
       data-step-title="Step 2: SVG background"
       data-step-background="svg(BallSorting.json)"
       data-step-width="560"
       data-step-height="280"
       data-step-theme="light">
    <div class="step-card">
      <div class="step-title">Pick a plan</div>
      <div class="step-desc">This step uses a Lottie background animation.</div>
      <div class="field">
        <label>Plan</label>
        <select name="plan">
          <option value="free">Free</option>
          <option value="pro">Pro</option>
          <option value="team">Team</option>
        </select>
      </div>
    </div>
  </div>

  <div class="mix-step"
       data-step-title="Step 3: Mixed icon + css background"
       data-step-icon="svg:BallSorting"
       data-step-iwidth="8em"
       data-step-iheight="8em"
       data-step-background="css(background: linear-gradient(135deg, rgba(32, 32, 48, 0.9), rgba(10, 10, 12, 0.92));)"
       data-step-width="520"
       data-step-height="260"
       data-step-theme="light">
    <div class="step-card">
      <div class="step-title">Confirm</div>
      <div class="step-desc">Background and icon are both customized here.</div>
      <div class="field">
        <label>Note</label>
        <input name="note" placeholder="Optional note">
      </div>
    </div>
  </div>
</div>

.hidden-dom { display: none; }
.step-card { display: grid; gap: 10px; text-align: left; }
.step-title { font-weight: 650; color: #1d1d1d; font-size: 14px; }
.step-desc { color: #4d4d4d; font-size: 13px; line-height: 1.5; }