היתה לי היום בעיה עם CSS - רציתי לייצר אלמנט שנפתח באנימציה לגובה שמחושב באופן אוטומטי לפי הגובה של הילדים. הנה הניסיון הראשון:

.item {
    transition: all 0.5s;
}

.close {
    height: 0;
    overflow: hidden;
}

.open {
    height: auto;
}

אם אתם מכירים מספיק CSS אתם יודעים שזה לא יכול לעבוד. אנימציה היא רק בין שני ערכים ידועים וגובה auto לא ידוע לדפדפן. אבל זאת לא הנקודה.

הלכתי לחבר Stack Overflow לראות מה ההמלצות וכמובן שאני לא הראשון שניסיתי את זה. ההצעה שם היתה להשתמש בגובה מקסימלי כדי לייצר את האנימציה: כלומר תגדירו גובה מקסימלי 0 במצב סגור וגובה מקסימלי ממש גבוה למצב פתוח וכך נקבל אנימציה על ה max-height. הגובה האמיתי נקבע ל auto והכל (כמעט) יעבוד:

.item {
    transition: all 0.5s;
}

.close {
    max-height: 0;
    overflow: hidden;
}

.open {
    max-height: 1000px;
}

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

בקיצור ביקשנו אנימציה של חצי שניה אבל בפועל היא הסתיימה הרבה יותר מהר.

אני חושב שקל לראות למה ההצעה הזאת לא טובה ובכל זאת קיבלה את ה-וי של Stack Overflow ואת אהבת הקהל. בהרבה מצבים אנחנו מעדיפים את הפיתרון הפשוט גם אם הוא לא מדויק ובמיוחד אם הפיתרון המדויק הרבה יותר מורכב. הבעיה שהרבה פעמים הפיתרונות הפשוטים האלה נשברים בזמן הכי לא מתאים.

אם אתם יכולים להרשות לעצמכם כדאי להשקיע את האקסטרה זמן בבניית הפיתרון הנכון. וכן גם אם זה אומר להשתמש בספריות אנימציה ב JavaScript.