اس دستی میں، ہم div کو دکھانے اور چھپانے کا طریقہ سیکھیں گے ' منتقلی سی ایس ایس کی خاصیت۔
CSS میں ٹرانزیشن کے ساتھ Div کیسے دکھائیں اور چھپائیں؟
سی ایس ایس ' منتقلی جائیداد ایک مخصوص مدت کی بنیاد پر جائیداد کی قدر کو تبدیل کرنا آسان بناتی ہے۔ اس کی حالت کے لحاظ سے یہ تیرتا یا فعال عنصر ہو سکتا ہے۔ مزید یہ کہ سی ایس ایس کی ٹرانزیشن پراپرٹی کا استعمال HTML میں div کو دکھانے اور چھپانے کے لیے کیا جاتا ہے۔
اب، منتقلی پراپرٹی کے نحو کی طرف چلتے ہیں۔
نحو
منتقلی کا اثر بناتے وقت آپ کو دو چیزیں بتانے کی ضرورت ہے:
بنیادی طور پر، ' منتقلی شارٹ ہینڈ پراپرٹی ہے جو چار دیگر خصوصیات پر مشتمل ہے، جو ذیل میں دی گئی ہیں۔
منتقلی : منتقلی-جائیداد کی منتقلی کا دورانیہٹرانزیشن ٹائمنگ فنکشن ٹرانزیشن ڈیلے
مذکورہ خصوصیات کی تفصیل یہ ہے:
- منتقلی جائیداد: اس کا استعمال کسی بھی CSS پراپرٹی میں منتقلی کو سیٹ کرنے کے لیے کیا جاتا ہے۔ جیسے چوڑائی، اونچائی، دھندلاپن، اور بہت کچھ۔
- منتقلی کا دورانیہ: یہ منتقلی کی مدت کی وضاحت کرنے کے لئے استعمال کیا جاتا ہے.
- ٹرانزیشن ٹائمنگ فنکشن: یہ منتقلی کی رفتار کو مقرر کرنے کے لئے استعمال کیا جاتا ہے.
- منتقلی میں تاخیر: یہ وہ وقت بتاتا ہے جب منتقلی شروع ہوتی ہے یا تاخیر ہوتی ہے۔
آئیے ایک مثال لیں جس میں ہم div کو دکھائیں گے اور چھپائیں گے ' منتقلی سی ایس ایس کی خاصیت۔ اس مقصد کے لیے، سب سے پہلے، ہم ایک ' div 'اور ایک ان پٹ کی قسم' چیک باکس '
مرحلہ 1: Div بنائیں اور اسٹائل کریں۔
ایچ ٹی ایم ایل
<مرکز ><لیبل > Div > <ان پٹ کی قسم = 'چیک باکس' >
مرکز >
اس کے بعد، ہم بیک گراؤنڈ کلر پراپرٹی کا استعمال کرکے div کو اسٹائل کریں گے اور بیک گراؤنڈ کا رنگ سیٹ کریں گے۔ rgb(238, 190, 118) ' ہم div کی اونچائی کو ' 150px 'اور اس کے ارد گرد بارڈر کو ایڈجسٹ کریں' 10px '،' چوٹی '، اور ' rgb(6, 56, 2) ' آخر میں، ہم فونٹ کے سائز کی وضاحت کریں گے ' 50px '
سی ایس ایس
div {پس منظر کا رنگ : آر جی بی ( 238 ، 190 ، 118 ) ;
اونچائی : 150px ;
سرحد : 10px چوٹی آر جی بی ( 6 ، 56 ، دو ) ;
حرف کا سائز : 50px ;
}
اوپر بیان کردہ کوڈ کا آؤٹ پٹ نیچے دیا گیا ہے۔ یہاں، آپ دیکھ سکتے ہیں کہ div اور چیک باکس کامیابی سے بن گئے ہیں:
اب، اگلے مرحلے پر جائیں جس میں ہم ٹرانزیشن پراپرٹی کا استعمال کرتے ہوئے div کو چھپاتے اور دکھاتے ہیں۔
مرحلہ 2: منتقلی کے ساتھ ایک Div دکھائیں اور چھپائیں۔
ایسا کرنے کے لیے، ہم ترتیب دے کر منتقلی کا اثر مرتب کریں گے۔ دھندلاپن '، اس کا دورانیہ بطور' 2s ، اور دھندلاپن کی قدر بطور ' 0 ' div کلاس میں جو ہم نے CSS میں بنائی ہے:
منتقلی : دھندلاپن 2s ;دھندلاپن : 0 ;
نوٹ: ہم منتقلی کا اطلاق کریں گے ' دھندلاپن عنصر کی شفافیت کو قائم کرنے کے لیے خاصیت۔ یہاں، ہم اس کی قدر کی وضاحت کریں گے ' 0 ”، جس کا مطلب ہے کہ جب منتقلی شروع ہوتی ہے، div دو سیکنڈ کے لیے چھپ جائے گا۔
منتقلی کی اقدار کو ترتیب دینے کے بعد، ہم استعمال کریں گے ' ان پٹ ایچ ٹی ایم ایل فائل میں بنائی گئی ان پٹ قسم تک رسائی حاصل کرنے اور ان پٹ عنصر کی سیوڈو کلاس کو بطور سیٹ کریں۔ : چیک کیا۔ ' پھر، ہم تخلیق کردہ div تک رسائی حاصل کریں گے، اور ' + ” آپریٹر چیک باکس کو div کے ساتھ منسلک کرنے کے لیے استعمال کیا جائے گا۔ اس طرح، جب چیک باکس پر آپریشن کیا جاتا ہے، تو اس کا استعمال div کو متاثر کرے گا۔ اگلا، ہم دھندلاپن کی قدر کو 'کے طور پر مقرر کریں گے 1 ”:
ان پٹ : چیک کیا + div {دھندلاپن : 1
}
نوٹ: ہم دھندلاپن کی قدر کی وضاحت کریں گے ' 1 ”، جس کا مطلب ہے کہ جب چیک باکس کو نشان زد کیا جائے گا، تو تخلیق شدہ div دکھایا جائے گا۔ مزید یہ کہ div کو چھپانے کے لیے اس پر نشان ہٹا دیں۔
جیسا کہ آپ دیکھ سکتے ہیں، div دکھایا گیا ہے اور چھپا ہوا ہے ' منتقلی 'جائیداد اور' : چیک کیا۔ چھدم کلاس عنصر:
ہم نے CSS میں ٹرانزیشن پراپرٹی کے ساتھ div کو چھپانے اور دکھانے کا طریقہ بتایا ہے۔
نتیجہ
ایک div دکھانے اور چھپانے کے لیے، ' منتقلی 'جائیداد اور' : چیک کیا۔ ' چھدم کلاس عنصر اس طرح استعمال کیا جاتا ہے کہ div دھندلاپن کی قدر کو ' کے طور پر سیٹ کیا جاتا ہے 0 '، اور اس میں : سیوڈو کلاس عنصر کو چیک کیا، دھندلاپن کو ' کے طور پر سیٹ کریں 1 ' جب صارف چیک باکس پر کلک کرتا ہے، div ظاہر ہو جائے گا، اور جب یہ غیر چیک ہو جائے گا، div چھپ جائے گا۔ اس دستی میں، ہم نے ٹرانزیشن پراپرٹی کا استعمال کرکے div کو چھپانے اور دکھانے کا طریقہ بیان کیا ہے۔