במדריך זה, נלמד את ההליך להצגה והסתרה של ה-div עם ' מַעֲבָר 'נכס של CSS.
כיצד להציג ולהסתיר Div עם Transition ב-CSS?
ה-CSS ' מַעֲבָר ' נכס מקל על שינוי ערך הנכס בהתבסס על תקופה מסוימת. זה יכול להיות אלמנט צף או פעיל, בהתאם למצבו. יתרה מכך, מאפיין המעבר של CSS משמש להצגה והסתרה של ה-div ב-HTML.
כעת, בואו נעבור לתחביר של מאפיין המעבר.
תחביר
יש שני דברים שעליך לציין בעת יצירת אפקט מעבר:
בעיקרון, ' מַעֲבָר ” הוא מאפיין קיצור המורכב מארבעה נכסים נוספים, המובאים להלן:
מַעֲבָר : מעבר-נכס מעבר-משךמעבר-תזמון-פונקציה מעבר-עיכוב
להלן התיאור של הנכסים שהוזכרו:
- נכס מעבר: הוא משמש כדי להגדיר את המעבר לכל מאפיין CSS. כגון רוחב, גובה, אטימות ועוד רבים.
- משך המעבר: הוא משמש לציון משך המעבר.
- תזמון-מעבר: זה משמש כדי לקבוע את מהירות המעבר.
- מעבר-עיכוב: הוא מציין את הזמן שבו המעבר מתחיל או מתעכב.
ניקח דוגמה שבה נציג ונסתיר את ה-div עם ה-' מַעֲבָר 'נכס של CSS. לשם כך, ראשית, אנו יוצרים ' div ' וסוג קלט ' תיבת סימון '.
שלב 1: יצירה וסגנון של Div
בתוך התג
HTML
<מרכז ><תווית > הצג את Div > <סוג קלט = 'תיבת סימון' >
>
להלן, נסגננו את ה-div באמצעות המאפיין רקע-צבע ונקבע את צבע הרקע כ' rgb(238, 190, 118) '. נגדיר את גובה ה-div כ' 150 פיקסלים ' והתאם את הגבול סביבו כ' 10 פיקסלים ', ' רֶכֶס ', ו' rgb(6, 56, 2) '. בסופו של דבר, נציין את גודל הגופן כ' 50 פיקסלים '.
CSS
div {צבע רקע : rgb ( 238 , 190 , 118 ) ;
גוֹבַה : 150 פיקסלים ;
גבול : 10 פיקסלים רֶכֶס rgb ( 6 , 56 , שתיים ) ;
גודל גופן : 50 פיקסלים ;
}
הפלט של הקוד המתואר לעיל ניתן להלן. כאן, אתה יכול לראות שה-div ותיבת הסימון נוצרו בהצלחה:
כעת, עברו לשלב הבא בו אנו מסתירים ומציגים את ה-div באמצעות מאפיין המעבר.
שלב 2: הצג והסתיר Div With Transition
לשם כך, נגדיר את אפקט המעבר על ידי הגדרת ' אֲטִימוּת ', משך הזמן שלו כ' 2 שניות ', והערך של האטימות כ' 0 ' בשיעור div שיצרנו ב-CSS:
מַעֲבָר : אֲטִימוּת 2 שניות ;אֲטִימוּת : 0 ;
הערה: אנו ניישם את המעבר ב' אֲטִימוּת ' מאפיין כדי להגדיר את השקיפות של האלמנט. כאן, נציין את ערכו כ' 0 ', כלומר כאשר המעבר מתחיל, ה-div יהיה מוסתר למשך שתי שניות.
לאחר הגדרת ערכי המעבר, נשתמש ב-' קֶלֶט ' כדי לגשת לסוג הקלט שנוצר בקובץ ה-HTML ולהגדיר את הפסאודו-קלאס של רכיב הקלט כ' :בָּדוּק '. לאחר מכן, ניגש ל-div שנוצר, ול-' + ' האופרטור ישמש כדי לשייך את תיבת הסימון ל-div. לפיכך, כאשר מתבצעת פעולה על תיבת הסימון, השימוש בה ישפיע על ה-div. לאחר מכן, נגדיר את ערך האטימות כ' 1 ”:
קֶלֶט : בָּדוּק + div {אֲטִימוּת : 1
}
הערה: נציין את ערך האטימות כ' 1 ”, כלומר כאשר תיבת הסימון מסומנת, ה-div שנוצר יוצג. יתר על כן, בטל את הסימון כדי להסתיר את ה-div
כפי שאתה יכול לראות, ה-div מוצג ומוסתר באמצעות ' מַעֲבָר 'רכוש ו' :בָּדוּק 'אלמנט פסאודו-קלאס:
הסברנו את השיטה להסתרה ולהצגה של div עם מאפיין מעבר ב-CSS.
סיכום
כדי להציג ולהסתיר div, ' מַעֲבָר 'רכוש ו' :בָּדוּק ' אלמנט פסאודו-קלאס משמש בצורה כזו שהערך של אטימות div מוגדר כ' 0 ', וברכיב :checked pseudo-class, הגדר אטימות כ' 1 '. כאשר המשתמש לוחץ על תיבת הסימון, ה-div יוצג, וכאשר הוא לא מסומן, ה-div יתחבא. במדריך זה, תיארנו את השיטה להסתרה והצגה של div באמצעות מאפיין המעבר.