CSS transition לאבא (parent), כשהוא גודל מכיוון שנוספים לו ילדים

[shsh654]

כשרוצים לעשות טרנזישיין לדיב, של שינוי הגובה לדוגמא ב-hover
אם מגדירים לפנ"כ את הגובה, ואת הגובה שישתנה ב-hover,
ה-transition עובד יפה

This user does not have permission to use the HTML BB code.

השאלה היא - אם אני מוסף לדיב ילדים, עם java-script, כך שאני לא יכול להגדיר את הגובה של האבא, כי אני כל פעם מוסיף עוד ועוד ילדים, ובעקבותיהם האבא גדל,
איך עושים את ה-transition?

https://codepen.io/shsh654/pen/OJPMbJJ

 

[UU]

בבקשה:
https://codepen.io/UT150/pen/ExaPNdG

 

[shsh654]

בבקשה:
https://codepen.io/UT150/pen/ExaPNdG

תודה רבה!!!

אבל אם אני לא יודע מה יהיה הגובה, כי אני מוסיף את הילדים אחד ליד השני, ובהתאם לרוחב המסך הם יורדים אחד מתחת לשני?

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

 

[ש.ב.ח.]

תודה רבה!!!

אבל אם אני לא יודע מה יהיה הגובה, כי אני מוסיף את הילדים אחד ליד השני, ובהתאם לרוחב המסך הם יורדים אחד מתחת לשני?

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

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

לדעתי, התשובה היא
שבהוספת ילד נוסיף אותו עם גובה 0px ונגדיל אותו מיד לגובהו המלא ב2 שניות (סוג של אנימציית כניסה) כך הוא יגדל עם ההורה ביחד.

 

[UU]

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

לדעתי, התשובה היא
שבהוספת ילד נוסיף אותו עם גובה 0px ונגדיל אותו מיד לגובהו המלא ב2 שניות (סוג של אנימציית כניסה) כך הוא יגדל עם ההורה ביחד.

nice
זה עובד
https://codepen.io/UT150/pen/ExaPNdG