แอนิเมชันเปิดและปิดโมดัล

<!-- Backdrop with fade -->
<div
  id="backdrop"
  onclick="closeModal()"
  class="fixed inset-0 bg-black/50 z-40
         transition-opacity duration-300
         opacity-0 pointer-events-none">
</div>

<script>
  function openModal() {
    document.getElementById('backdrop').classList.remove('opacity-0', 'pointer-events-none');
    document.getElementById('backdrop').classList.add('opacity-100', 'pointer-events-auto');
  }
  function closeModal() {
    document.getElementById('backdrop').classList.remove('opacity-100', 'pointer-events-auto');
    document.getElementById('backdrop').classList.add('opacity-0', 'pointer-events-none');
  }
</script>

<!-- Dialog panel -->
<div
  id="dialog"
  class="bg-white rounded-2xl shadow-2xl w-full max-w-md
         transition-all duration-300
         scale-95 opacity-0 pointer-events-none">
  <!-- content -->
</div>

<script>
  function openModal() {
    const d = document.getElementById('dialog');
    d.classList.remove('scale-95', 'opacity-0', 'pointer-events-none');
    d.classList.add('scale-100', 'opacity-100', 'pointer-events-auto');
  }
  function closeModal() {
    const d = document.getElementById('dialog');
    d.classList.remove('scale-100', 'opacity-100', 'pointer-events-auto');
    d.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
  }
</script>

<div
  id="sheet"
  class="fixed bottom-0 inset-x-0 z-50 bg-white rounded-t-2xl shadow-2xl
         transition-transform duration-300 ease-out
         translate-y-full">
  <!-- Drag handle -->
  <div class="w-10 h-1 rounded-full bg-gray-300 mx-auto mt-3"></div>
  <div class="px-6 py-5">
    <h2 class="text-lg font-semibold text-gray-900">Share</h2>
    <p class="mt-2 text-sm text-gray-600">Choose how you want to share this item.</p>
  </div>
  <div class="flex justify-end gap-3 px-6 pb-6">
    <button onclick="closeSheet()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
    <button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Share</button>
  </div>
</div>

<!-- Entrance: fast start, slow end -->
<div class="transition-all duration-300 ease-out
            scale-95 opacity-0">
  Modal entering
</div>

<!-- Exit: slow start, fast end -->
<div class="transition-all duration-200 ease-in
            scale-95 opacity-0">
  Modal exiting
</div>

<script>
  function closeModal() {
    const dialog = document.getElementById('dialog');
    const backdrop = document.getElementById('backdrop');

    // Start exit animation
    dialog.classList.remove('scale-100', 'opacity-100');
    dialog.classList.add('scale-95', 'opacity-0');
    backdrop.classList.remove('opacity-100');
    backdrop.classList.add('opacity-0');

    // Wait for animation to finish, then hide
    dialog.addEventListener('transitionend', () => {
      dialog.classList.add('pointer-events-none');
      backdrop.classList.add('pointer-events-none');
      document.body.classList.remove('overflow-hidden');
    }, { once: true });
  }
</script>

<!-- Backdrop: starts immediately -->
<div id="backdrop"
     class="fixed inset-0 bg-black/50 z-40
            transition-opacity duration-300
            opacity-0 pointer-events-none">
</div>

<!-- Dialog: starts 100ms after backdrop -->
<div id="dialog"
     class="bg-white rounded-2xl shadow-2xl w-full max-w-md
            transition-all duration-300 delay-100
            scale-90 opacity-0 pointer-events-none">
  <!-- content -->
</div>

<!-- On open: add opacity-100 to backdrop, then scale-100/opacity-100 to dialog (delay-100 handles the stagger) -->
<!-- On close: remove delay-100 from dialog before starting the exit --></i>

<!-- Zoom-in alert -->
<div
  id="alert-dialog"
  class="bg-white rounded-2xl shadow-2xl w-full max-w-sm
         transition-all duration-150 ease-out
         scale-50 opacity-0">
  <div class="p-6 text-center">
    <div class="mx-auto w-14 h-14 rounded-full bg-red-100 flex items-center justify-center">
      <svg class="w-7 h-7 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
      </svg>
    </div>
    <h2 class="mt-4 text-lg font-bold text-gray-900">Critical Error</h2>
    <p class="mt-2 text-sm text-gray-500">Your session has expired. Please log in again.</p>
    <button class="mt-5 w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg">Sign In Again</button>
  </div>
</div>

// Class toggling (Tailwind approach) — preferred
function openModal() {
  dialog.classList.remove('scale-95', 'opacity-0');
  dialog.classList.add('scale-100', 'opacity-100');
}

// Inline style approach — avoid unless necessary
function openModalInline() {
  dialog.style.transform = 'scale(1)';
  dialog.style.opacity = '1';
  // Hard to maintain, not visible in HTML
}

<div
  id="dialog"
  class="bg-white rounded-2xl shadow-2xl w-full max-w-md
         transition-all duration-300 ease-out
         motion-reduce:transition-none
         scale-95 opacity-0">
  <!-- dialog content -->
</div>

<!-- Toast element -->
<div
  id="toast"
  class="fixed bottom-4 right-4 z-50
         flex items-center gap-3 px-4 py-3 bg-gray-900 text-white text-sm rounded-xl shadow-xl
         transition-all duration-300
         translate-y-2 opacity-0 pointer-events-none">
  <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
  </svg>
  Changes saved successfully!
</div>

<script>
  function showToast() {
    const t = document.getElementById('toast');
    t.classList.remove('translate-y-2', 'opacity-0', 'pointer-events-none');
    t.classList.add('translate-y-0', 'opacity-100');
    setTimeout(() => {
      t.classList.remove('translate-y-0', 'opacity-100');
      t.classList.add('translate-y-2', 'opacity-0', 'pointer-events-none');
    }, 3000);
  }
</script>