การเคลื่อนไหวเป็นหัวใจสำคัญของประสบการณ์ทางดิจิทัล ซึ่งจะนำทางผู้ใช้จากการโต้ตอบหนึ่งไปยังอีกการโต้ตอบหนึ่ง แต่มีช่องว่างเล็กน้อยสำหรับภาพเคลื่อนไหวที่ราบรื่นในแพลตฟอร์มเว็บ ซึ่งรวมถึงความสามารถในการสร้างภาพเคลื่อนไหวเข้าและออกจากภาพเคลื่อนไหวได้อย่างง่ายดาย ตลอดจนการสร้างภาพเคลื่อนไหวเข้าและออกจากเลเยอร์บนสุดได้อย่างราบรื่นสำหรับองค์ประกอบที่ปิดได้ เช่น กล่องโต้ตอบและป๊อปอัป
เพื่อเติมเต็มช่องว่างเหล่านี้ Chrome 116 และ 117 มีฟีเจอร์แพลตฟอร์มเว็บใหม่ 4 รายการ ซึ่งช่วยให้ภาพเคลื่อนไหวและการเปลี่ยนที่ลื่นไหลสำหรับพร็อพเพอร์ตี้ที่แยกกันโดยสิ้นเชิง
ฟีเจอร์ใหม่ 4 รายการมีดังนี้
- ความสามารถในการทำให้
display
และcontent-visibility
เคลื่อนไหวบนไทม์ไลน์คีย์เฟรม (จาก Chrome 116) - พร็อพเพอร์ตี้
transition-behavior
ที่มีคีย์เวิร์ดallow-discrete
เพื่อเปิดใช้การเปลี่ยนพร็อพเพอร์ตี้ที่แยกกัน เช่นdisplay
(จาก Chrome 117) - กฎ
@starting-style
เพื่อทำให้เอฟเฟกต์รายการเคลื่อนไหวจากdisplay: none
และไปยังเลเยอร์บนสุด (จาก Chrome 117) - พร็อพเพอร์ตี้
overlay
สำหรับควบคุมลักษณะการทำงานของเลเยอร์ด้านบนระหว่างภาพเคลื่อนไหว (จาก Chrome 117) ## แสดงภาพเคลื่อนไหวในคีย์เฟรม
จาก Chrome 116 คุณสามารถใช้ display
และ content-visibility
ในกฎคีย์เฟรมได้ จากนั้นจะสลับกันเมื่อมีคีย์เฟรมเกิดขึ้น ไม่จำเป็นต้องมีค่าใหม่เพิ่มเติมเพื่อรองรับการดำเนินการต่อไปนี้
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
ตัวอย่างก่อนหน้านี้ทำให้ความทึบแสงเป็น 0 ในช่วง 0.5 วินาที จากนั้นตั้งค่าการแสดงผลเป็นไม่มี นอกจากนี้ คีย์เวิร์ด forwards
ยังช่วยให้ภาพเคลื่อนไหวยังคงอยู่ในสถานะสิ้นสุด เพื่อให้องค์ประกอบที่นำมาใช้นั้นยังคงเป็น display: none
และ opacity: 0
นี่คือตัวอย่างง่ายๆ ที่เลียนแบบสิ่งที่คุณสามารถทำได้ด้วยการเปลี่ยน (ดูการสาธิตในหัวข้อการเปลี่ยน) อย่างไรก็ตาม การเปลี่ยนจะสร้างภาพเคลื่อนไหวที่ซับซ้อนมากขึ้นไม่ได้ดังตัวอย่างต่อไปนี้
.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
ภาพเคลื่อนไหว spin-and-delete
เป็นภาพเคลื่อนไหวการออก ก่อนอื่น การ์ดจะหมุนบนแกน Y หมุนไปตามโทนสี จากนั้นที่ 80%
ผ่านไทม์ไลน์จะเปลี่ยนความทึบแสงจาก 1 เป็น 0 สุดท้ายแล้วจึงเปลี่ยนจาก display: block
เป็น display: none
สำหรับภาพเคลื่อนไหวการออกเหล่านี้ คุณสามารถตั้งค่าทริกเกอร์สำหรับภาพเคลื่อนไหว แทนที่จะใช้กับองค์ประกอบโดยตรง ตัวอย่างเช่น การแนบ Listener เหตุการณ์ลงในปุ่มที่จะทริกเกอร์คลาสเพื่อให้ภาพเคลื่อนไหวไปใช้ เช่น
.spin-out {
animation: spin-and-delete 1s ease-in forwards;
}
document.querySelector('.delete-btn').addEventListener('click', () => {
document.querySelector('.card').classList.add('spin-out');
})
ตัวอย่างด้านบนมีสถานะสิ้นสุดเป็น display:none
แล้ว มีหลายกรณีที่คุณอาจต้องการดำเนินการต่อไปและนำโหนด DOM ที่มีระยะหมดเวลาออกเพื่อให้ภาพเคลื่อนไหวทำงานให้เสร็จก่อน
การเปลี่ยนภาพเคลื่อนไหวแบบแยกกัน
คุณจะต้องใช้โหมดลักษณะการทำงานของการเปลี่ยน allow-discrete
เพื่อเปลี่ยนคุณสมบัติแบบแยกกันให้เคลื่อนไหว ซึ่งต่างจากตอนที่ทำให้คุณสมบัติแบบแยกกันเคลื่อนไหวด้วยคีย์เฟรม
พร็อพเพอร์ตี้ transition-behavior
โหมด allow-discrete
คือสิ่งที่ทำให้การเปลี่ยนแบบแยกต่างหากเกิดขึ้นได้ และเป็นค่าของพร็อพเพอร์ตี้ transition-behavior
transition-behavior
ยอมรับ 2 ค่า ได้แก่ normal
และ allow-discrete
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
ชวเลข transition
จะตั้งค่านี้ด้วยเช่นกัน ดังนั้นคุณสามารถละเว้นคุณสมบัตินี้ และใช้คีย์เวิร์ด allow-discrete
ที่ท้ายชวเลข transition
สำหรับการเปลี่ยนแต่ละครั้งแทน
.card {
transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
หากคุณกําลังทําให้พร็อพเพอร์ตี้ที่แยกกันหลายรายการเคลื่อนไหว คุณจะต้องใส่ allow-discrete
หลังพร็อพเพอร์ตี้แต่ละรายการที่ต้องการให้เคลื่อนไหว เช่น
.card {
transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
กฎ @starting-style
สำหรับภาพเคลื่อนไหวรายการ
ที่ผ่านมาบทความนี้ได้กล่าวถึงภาพเคลื่อนไหวการออก ในการสร้างภาพเคลื่อนไหวในรายการ คุณจะต้องใช้กฎ @starting-style
ใช้ @starting-style
เพื่อใช้รูปแบบที่เบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้าเว็บ นี่คือสถานะ "ก่อนเปิด" (ต้นทางของภาพเคลื่อนไหว)
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
ตอนนี้คุณมีทั้งสถานะเข้าและออกสำหรับรายการสิ่งที่ต้องทำเหล่านี้
การทำให้องค์ประกอบเคลื่อนไหวไปยังและจากเลเยอร์บน
หากต้องการทำให้องค์ประกอบเคลื่อนไหวไปยังและจากเลเยอร์บน ให้ระบุ @starting-style
ในสถานะ "เปิด" เพื่อบอกเบราว์เซอร์ว่าจะเริ่มเคลื่อนไหวจากที่ใด สำหรับกล่องโต้ตอบ สถานะเปิดจะกําหนดด้วยแอตทริบิวต์ [open]
สำหรับป๊อปโอเวอร์ ให้ใช้คลาสจำลอง :popover-open
ตัวอย่างง่ายๆ ของกล่องโต้ตอบจะมีลักษณะดังนี้
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* 1. IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* 2. EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
ในตัวอย่างต่อไปนี้ เอฟเฟกต์การเข้าและออกจะแตกต่างกัน ป้อนโดยการเคลื่อนไหวขึ้นจากด้านล่างของวิวพอร์ต ออกจากเอฟเฟกต์ไปที่ด้านบนของวิวพอร์ต นอกจากนี้ยังเขียนด้วย CSS ที่ฝังไว้เพื่อให้เห็นภาพได้มากขึ้น
เมื่อทำให้ป๊อปอัปเคลื่อนไหว ให้ใช้คลาสจำลอง :popover-open
แทนแอตทริบิวต์ open
ที่ใช้ก่อนหน้านี้
.settings-popover {
&:popover-open {
/* 0. BEFORE-OPEN STATE */
/* Initial state for what we're animating *in* from,
in this case: goes from lower (y + 20px) to center */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. IS-OPEN STATE */
/* state when popover is open, BOTH:
what we're transitioning *in* to
and transitioning *out* from */
transform: translateY(0);
opacity: 1;
}
/* 2. EXIT STATE */
/* Initial state for what we're animating *out* to ,
in this case: goes from center to (y - 50px) higher */
transform: translateY(-50px);
opacity: 0;
/* Enumerate transitioning properties,
including display and allow-discrete mode */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
ที่พัก overlay
แห่ง
สุดท้าย หากต้องการทำให้ popover
หรือ dialog
จางลงจากเลเยอร์ด้านบน ให้เพิ่มพร็อพเพอร์ตี้ overlay
ลงในรายการทรานซิชันของคุณ popover
และ dialog
ใช้ Escape คลิประดับบน และการเปลี่ยนรูปแบบ รวมถึงวางเนื้อหาในเลเยอร์บนสุดด้วย หากคุณไม่เปลี่ยน overlay
องค์ประกอบจะกลับไปถูกตัดทอน เปลี่ยนรูปแบบ และถูกบดบังทันที และคุณจะไม่เห็นการเปลี่ยนดังกล่าว
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
แต่ให้รวม overlay
ในทรานซิชันหรือภาพเคลื่อนไหวเพื่อให้ overlay
เคลื่อนไหวร่วมกับฟีเจอร์อื่นๆ แทน และตรวจสอบว่ายังอยู่ในเลเยอร์บนสุดเมื่อเคลื่อนไหว วิธีนี้ดูราบรื่นขึ้นมาก
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
นอกจากนี้ เมื่อคุณเปิดองค์ประกอบหลายรายการไว้ในเลเยอร์บน การวางซ้อนจะช่วยให้คุณควบคุมการเปลี่ยนเข้าและออกจากเลเยอร์บนสุดได้อย่างราบรื่น ดูความแตกต่างได้ในตัวอย่างง่ายๆ นี้ หากไม่ได้นำ overlay
ไปใช้กับป๊อปอัปที่ 2 เมื่อย้ายออก ก่อนอื่นระบบจะย้ายออกจากเลเยอร์บนสุดโดยข้ามด้านหลังป็อปโอเวอร์อื่น ก่อนเริ่มการเปลี่ยน เอฟเฟกต์นี้ไม่ได้ราบรื่นเท่าที่ควร
หมายเหตุเกี่ยวกับการเปลี่ยนมุมมอง
หากคุณกำลังทำการเปลี่ยนแปลง DOM เช่น การเพิ่มและนำองค์ประกอบออกจาก DOM อีกโซลูชันหนึ่งที่ยอดเยี่ยมสำหรับภาพเคลื่อนไหวที่ราบรื่นคือการเปลี่ยนมุมมอง ต่อไปนี้เป็นสองตัวอย่างข้างต้นที่สร้างขึ้นโดยใช้การเปลี่ยนมุมมอง
ในการสาธิตครั้งแรกนี้ แทนที่จะตั้งค่า @starting-style
และการแปลง CSS อื่นๆ การเปลี่ยนมุมมองจะจัดการการเปลี่ยน วิธีเปลี่ยนมุมมองมีการตั้งค่าดังนี้
ก่อนอื่น ใน CSS ให้กำหนด view-transition-name
ให้การ์ดแต่ละใบ
.card-1 {
view-transition-name: card-1;
}
.card-2 {
view-transition-name: card-2;
}
/* etc. */
จากนั้นใน JavaScript ให้รวมการเปลี่ยนแปลง DOM (ในกรณีนี้คือการนำการ์ดออก) ในการเปลี่ยนมุมมอง
deleteBtn.addEventListener('click', () => {
// Check for browser support
if (document.startViewTransition) {
document.startViewTransition(() => {
// DOM mutation
card.remove();
});
}
// Alternative if no browser support
else {
card.remove();
}
})
ตอนนี้เบราว์เซอร์สามารถจัดการการเฟดออกและเปลี่ยนการ์ดแต่ละใบไปยังตำแหน่งใหม่ได้แล้ว
อีกตัวอย่างหนึ่งซึ่งมีประโยชน์คือการสาธิตการเพิ่ม/นำรายการออก ในกรณีนี้ คุณต้องอย่าลืมเพิ่ม view-transition-name
ที่ไม่ซ้ำสำหรับการ์ดแต่ละใบที่สร้างขึ้น
บทสรุป
ฟีเจอร์ใหม่ของแพลตฟอร์มเหล่านี้ช่วยให้เราเข้าใกล้การเข้าสู่และออกจากภาพเคลื่อนไหวในแพลตฟอร์มบนเว็บได้อย่างราบรื่นยิ่งขึ้น ดูข้อมูลเพิ่มเติมได้ที่ลิงก์ต่อไปนี้