ตัวสร้าง CSS View Transition
สร้าง view-transition-name และ ::view-transition-old/new() pseudo-element CSS พร้อม duration, easing, blend mode และ direction พรีวิวสด โค้ดคัดลอกได้ทันที ประมวลผล 100% ฝั่งไคลเอนต์
Loading tool...
ตัวสร้าง CSS View Transition คืออะไร?
ตัวสร้าง CSS View Transition สร้าง declaration view-transition-name และกฎ pseudo-element ::view-transition-old() และ ::view-transition-new() ที่เข้าคู่กัน เพื่อใช้สร้าง animation morph ที่ลื่นไหลระหว่างสถานะ DOM สองสถานะ คุณตั้ง duration, timing function, mix-blend-mode และ animation-direction ดูพรีวิวสดแบบจำลอง และคัดลอก CSS ที่ถูกต้องและวางได้ทันทีสำหรับทั้ง same-document (SPA) และ cross-document (MPA) transitions
ประโยชน์หลัก
- สร้างกฎ pseudo-element ของ view-transition ทั้งชุดในคลิกเดียว
- ควบคุม duration, easing, blend mode และ animation direction
- ตรวจสอบ custom-ident ของ view-transition-name แบบสด
- CSS ที่ถูกต้องและวางลง stylesheet ได้ทันที
- ทำงาน 100% ฝั่งไคลเอนต์ ใช้งานออฟไลน์ได้และรักษาความเป็นส่วนตัวของ markup
กรณีการใช้งาน
- •สร้าง animation morph ของ hero image ระหว่างการเปลี่ยน route ใน SPA
- •สร้าง shared-element transition ระหว่าง list และ detail views
- •ทำต้นแบบ cross-fade duration ก่อนเชื่อมต่อกับ API
- •สร้าง CSS scaffold สำหรับ cross-document (MPA) page transitions
วิธีสร้าง CSS View Transitions
- กรอกชื่อ transition: พิมพ์ view-transition-name เช่น hero-image ช่องนี้จะตรวจสอบว่าเป็น CSS custom-ident ที่ถูกต้อง (ตัวอักษร ตัวเลข ยติภังค์)
- ตั้ง duration และ easing: เลือก animation duration เป็นมิลลิวินาทีและ timing function (ease, ease-in-out หรือ cubic-bezier กำหนดเอง)
- ปรับ blend และ direction: กำหนด mix-blend-mode สำหรับการ cross-fade และ animation-direction (both, reverse, alternate) สำหรับ group pseudo-element ได้ตามต้องการ
- คัดลอก CSS: อ่านกฎ ::view-transition-old/new() ที่สร้างขึ้นแล้วคลิกคัดลอกเพื่อวางลงใน stylesheet หรือ transition layer ของคุณ
คุณสมบัติหลัก
- สร้าง view-transition-name พร้อมกฎ ::view-transition-old() และ ::view-transition-new()
- ควบคุม duration, timing function, mix-blend-mode และ animation-direction
- ตรวจสอบ custom-ident แบบสดสำหรับชื่อ transition
- คัดลอก CSS ที่ถูกต้องและวางได้ทันทีในคลิกเดียว
- พรีวิวการ transition แบบจำลองสำหรับ timing และ easing curve