מחולל מעבר CSS

מחולל המעבר CSS הוא עורך חזותי עבור מאפיין המעבר CSS.אתה בוחר איזה מאפיין להנפיש, מגדיר את משך הזמן, בוחר פונקציית תזמון ומוסיף השהייה, ואז מפעיל תצוגה מקדימה חיה כדי לצפות בהקלה המדויקת לפני העתקת ההצהרה. אתה יכול לשכב מספר מעברים בקיצור אחד - למשל אטימות דהייה תוך כדי הזזת טרנספורמציה - וכל שכבה מקבלת תכונה משלה, משך, תזמון והשהייה.

מעבר אומר לדפדפן להנפיש את השינוי בין שני ערכים של מאפיין במקום לעבור באופן מיידי. שנה צבע רקע בריחוף ללא מעבר והוא נצמד; הוסף מעבר: קלות צבע רקע 200ms ואותו שינוי מקל על פני חמישית שנייה המעבר חי על מצב הבסיס, לא על מצב הריחוף, כך שהאלמנט מחייה גם לתוך השינוי וגם מחוצה לו, וזה מה שגורם לאינטראקציה להרגיש גמורה ולא פתאומית בדרך חזרה.

הכל קורה בדפדפן שלך התחל מתוך מוגדר מראש כמו Fade, Button hover או Bounce, התאם את המחוונים והבחירות, לחץ על ההדק התצוגה המקדימה כדי לראות את התנועה, והעתק את הקיצור הכלי כותב את ארבעת החלקים בסדר שהמפרט דורש - מאפיין, משך זמן, תזמון-פונקציה, השהיה - ומשמיט את ההשהיה כאשר הוא אפס אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.

הטעות הנפוצה ביותר היא ניסיון להעביר מאפיין שאין לו ערכי ביניים. display: none to display: block cannot animate, כי תצוגה היא לא מאפיין שניתן להנפשה - אין חצי דרך בין none לבלוק - וזו הסיבה ש-fade-in שנבנה בתצוגה בלבד קופץ. התיקון הוא להעביר אטימות ונראות יחד, או להשתמש בהתנהגות ה-allow-discrete החדשה יותר. כדאי גם להנפיש טרנספורמציה ואטימות על פני רוחב, גובה, עליון או שמאל: השניים הראשונים מורכבים על ה-GPU ואינם מפעילים פריסה, כך שהם נשארים חלקים, בעוד שהנפשת מאפייני פריסה מחשבת מחדש את הדף בכל מסגרת ומהווה את המקור הרגיל למעברים מטלטלים ומגמגמים.