Cara Marketer Indonesia Pasang CSS transition-behavior: allow-discrete di Next.js untuk Animasi Modal Popover, Pangkas 12 KB JavaScript Tanpa Library Animasi di 2026

TL;DR: CSS transition-behavior: allow-discrete mengizinkan transisi pada properti diskrit seperti display dan content-visibility, sehingga modal popover bisa fade-in murni CSS tanpa hack JavaScript. Pemasangan di Next.js 15 cukup tambah 3 baris CSS, pangkas 12 KB bundle dari library animasi, dan animasi modal terasa 38 persen lebih responsif berdasar audit Vito Atmo di proyek client kuartal kedua 2026.

Sampai pertengahan 2025, animasi pada properti display: none ke display: block mustahil ditransisikan karena display adalah properti diskrit. Banyak tim pakai trik visibility + opacity + setTimeout, atau bergantung pada library seperti Framer Motion. Per April 2026, dukungan CSS transition-behavior: allow-discrete sudah stabil di semua browser evergreen, dan ini mengubah cara modal popover dibangun di Next.js.

Dalam beberapa proyek terakhir, saya mengganti pola lama dengan tiga baris CSS. Hasilnya cukup mengejutkan: bundle JavaScript susut belasan kilobyte, animasi terasa instan, dan kode komponen jadi jauh lebih bersih.

Masalah Klasik Animasi Modal di Next.js

Pola lama untuk fade-in modal biasanya kombinasi useEffect, setTimeout, dan kelas CSS terpisah untuk state entering, entered, exiting. Setiap modal yang dibangun ulang menambah berat bundle. Pada audit Vito Atmo terhadap 12 landing page client di Januari 2026, rata-rata kode animasi modal menyumbang 14-22 KB minified per halaman, sebagian besar karena library animasi seperti Framer Motion di-import meskipun cuma dipakai untuk dua transisi sederhana.

Library ini bagus untuk animasi kompleks, tapi untuk fade-in standar modal lead form, ini overkill. Konsep yang lebih relevan dipelajari: CSS transition-behavior dan HTML Popover API.

Cara Pasang di Next.js 15

Letakkan di file CSS global (app/globals.css) atau CSS Module komponen Modal:

.modal {
  display: none;
  opacity: 0;
  transition:
    opacity 220ms ease,
    display 220ms allow-discrete,
    overlay 220ms allow-discrete;
}

.modal[data-open="true"] {
  display: block;
  opacity: 1;
}

@starting-style {
  .modal[data-open="true"] {
    opacity: 0;
  }
}

Tiga elemen penting:

Komponen React-nya jadi tipis:

'use client';
import { useState } from 'react';

export default function Modal({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Buka</button>
      <div className="modal" data-open={open}>
        {children}
        <button onClick={() => setOpen(false)}>Tutup</button>
      </div>
    </>
  );
}

Tidak ada useEffect, tidak ada setTimeout, tidak ada library tambahan. Browser modern menangani jadwal animasi dari data-open="false" ke data-open="true" secara native.

Studi Kasus: Modal Lead Form di Vetmo

Saat membangun ulang modal booking konsultasi di Vetmo (platform pet care), pola lama memakai Framer Motion plus state manager untuk antrian animasi. Total kode animasi: 18 KB minified ditambah 4 KB Framer runtime yang ikut tersedot. Setelah migrasi ke transition-behavior: allow-discrete:

• Bundle Modal Booking turun dari 22 KB ke 9,8 KB (pangkas sekitar 12 KB).
• Latency animasi entry pertama turun dari 145 ms ke 90 ms, lebih dari 38 persen perbaikan.
• Completion rate booking naik dari 41 persen ke 47 persen dalam 21 hari setelah deploy.

Angka completion rate ini spesifik ke konteks Vetmo dan tidak bisa di-generalize tanpa konteks industri serupa. Sumber teknis untuk validasi pola: MDN: transition-behavior.

Pertanyaan Umum

Apakah perlu polyfill untuk browser lama?

Tidak. Per April 2026, semua browser evergreen (Chrome, Edge, Safari, Firefox) sudah mendukung transition-behavior: allow-discrete. Untuk Safari di iOS 16 ke bawah, modal tetap berfungsi tanpa animasi (graceful degradation).

Bisa kombinasi dengan HTML Popover API?

Sangat bisa. Pola ideal untuk Next.js 15: gunakan atribut popover HTML native untuk perilaku show/hide, lalu pasang transition-behavior: allow-discrete untuk animasinya. Total dependency: nol JavaScript animasi.

Bagaimana kalau butuh animasi lebih kompleks seperti slide-in dari samping?

Tetap bisa pakai pola yang sama dengan tambahan transform: translateX() di @starting-style dan state final. Allow-discrete mengurus display-nya, transform diurus transisi biasa.

Penutup

Stack JavaScript yang dipakai marketer untuk animasi modal cenderung kelewat berat. CSS modern di 2026 sudah cukup matang untuk menggantikan 90 persen kasus pemakaian library animasi pada modal sederhana. Sebelum menambah dependency baru, periksa apakah transition-behavior, @starting-style, dan HTML Popover API bisa menyelesaikan masalah secara native.