CSS ڈسپلے پراپرٹی پر ٹرانزیشن

Css Spl Prapr Y Pr Ranzyshn



' منتقلی ایک سی ایس ایس پراپرٹی ہے جو حرکت پذیری کی رفتار کو کنٹرول کرنے کا سب سے آسان طریقہ بیان کرتی ہے جب سی ایس ایس کی قدر ایک قدر سے دوسری قدر میں تبدیل ہوتی ہے۔ منتقلی کو CSS پر لاگو کیا جا سکتا ہے۔ ڈسپلے ' جائیداد. ڈسپلے پراپرٹی کا استعمال کسی عنصر کے لے آؤٹ کو کنٹرول کرنے کے لیے کیا جاتا ہے، بشمول فلو لے آؤٹ، گرڈ، فلیکس اور بہت کچھ۔

یہ پوسٹ جانچ کرے گی کہ سی ایس ایس ڈسپلے پراپرٹی کا استعمال کرتے ہوئے ٹرانزیشن کو کیسے لاگو کیا جائے۔

CSS 'ڈسپلے' پراپرٹی پر ٹرانزیشن کا اطلاق کیسے کریں؟

صارفین سی ایس ایس پر براہ راست ٹرانزیشن کا اطلاق نہیں کر سکتے۔ ڈسپلے ' جائیداد. تاہم، ڈسپلے پراپرٹی پر ٹرانزیشن لاگو کرنے کا ایک متبادل طریقہ موجود ہے۔ اس مقصد کے لیے، درج ذیل طریقہ کار سے گزریں۔







مرحلہ 1: ایک '
' کنٹینر بنائیں

سب سے پہلے، 'کا استعمال کرتے ہوئے ایک div کنٹینر بنائیں

ایک مخصوص قدر کے ساتھ تفویض کردہ کلاس کے ساتھ ٹیگ۔



مرحلہ 2: ایک سرخی شامل کریں۔

اگلا، کسی بھی 'کا استعمال کرتے ہوئے ایک سرخی داخل کریں

'سے'
ٹیگز مثال کے طور پر، '

ایک سرخی شامل کرتا ہے۔



مرحلہ 3: فہرست میں ڈیٹا شامل کریں۔

فہرست کی شکل میں ڈیٹا داخل کرنے کے لیے، استعمال کریں ' <وہ> ٹیگ:





< div کلاس = 'پالتو جانور' >

< h1 > پالتو جانوروں کی فہرست < / h1 >

< کہ > مرغی < / کہ >

< کہ > بطخ < / کہ >

< کہ > کتا < / کہ >

< کہ > کیٹ < / کہ >

< کہ > خرگوش < / کہ >

< / div >

مندرجہ بالا کوڈ کی پیداوار مندرجہ ذیل ہے:





اب، فہرست کو اسٹائل کرنے کے لیے CSS سیکشن کی طرف بڑھیں۔

مرحلہ 4: طرز '. پالتو جانور' عنصر

تک رسائی حاصل کریں '

' تفویض کردہ کلاس کی مدد سے عنصر ' پالتو جانور اور درج کردہ خصوصیات کو لاگو کریں:

پالتو جانور {

سرحد : 2px نقطہ دار آر جی بی ( 230 ، پندرہ ، پندرہ ) ;

مارجن : 50px ;

پس منظر کا رنگ : آر جی بی ( 252 ، 239 ، 169 ) ;

}

یہاں:

  • ' سرحد ' پراپرٹی کو عنصر کے ارد گرد کی حد کی وضاحت کرنے کے لئے استعمال کیا جاتا ہے.
  • ' مارجن عنصر کی حد کے ارد گرد کی جگہ کی وضاحت کرتا ہے۔
  • ' پس منظر کا رنگ عنصر کے پچھلے حصے میں ایک رنگ مختص کرتا ہے۔

نتیجے کی تصویر مندرجہ بالا کوڈ کی پیداوار کو ظاہر کرتی ہے:

مرحلہ 5: انداز شامل کردہ فہرست 'li'

اب، فہرست تک رسائی حاصل کریں ' div 'کلاس رکھنے والا کنٹینر' پالتو جانور 'استعمال کرتے ہوئے' پالتو جانور > li اور ذیل میں دی گئی خصوصیات کو لاگو کریں:

پالتو جانور > کہ {

مرئیت : چھپا ہوا ;

دھندلاپن : 0.2 ;

منتقلی : مرئیت 0s ، دھندلاپن 0.5 سیکنڈ لکیری ;

}

یہاں:

  • ' مرئیت CSS کا استعمال کسی دستاویز کی ترتیب کو تبدیل کیے بغیر عنصر کی مرئیت کو متعین کرنے کے لیے کیا جاتا ہے، جیسا کہ پوشیدہ یا مرئی۔
  • ' دھندلاپن ایک عنصر کی شفافیت کی وضاحت کرتا ہے۔
  • ' منتقلی ” صارفین کو ایک مقررہ مدت کے دوران پراپرٹی کی قدروں کو آسانی سے تبدیل کرنے کی اجازت دیتا ہے:

مرحلہ 6: 'ہوور' سیوڈو کلاس کا اطلاق کریں۔

اب، لاگو کریں ' ہوور فہرست میں جائیداد:

پالتو جانور : ہوور > کہ {

مرئیت : نظر آنے والا ;

دھندلاپن : ایک ;

}

' : ہوور سی ایس ایس ایک سیڈو کلاس ہے جو رن ٹائم پر تبدیلیاں کرتی ہے جب ماؤس پوائنٹر کو عنصر پر منتقل کیا جاتا ہے۔ 'کا استعمال کرتے ہوئے ایک فہرست کو مرئی بنائیں مرئیت اور ' کا استعمال کرتے ہوئے شفافیت قائم کریں دھندلاپن ہوور پر فہرست میں سی ایس ایس کی خصوصیات:

یہ دیکھا جا سکتا ہے کہ ہم نے کامیابی کے ساتھ ' ڈسپلے ' جائیداد.

نتیجہ

سی ایس ایس کی منتقلی کا براہ راست اطلاق نہیں کیا جا سکتا۔ ڈسپلے ' جائیداد. تاہم، یہ ایک متبادل طریقے سے لاگو کیا جا سکتا ہے. ایسا کرنے کے لیے، ایچ ٹی ایم ایل دستاویز پر فہرست کا ٹیگ شامل کریں، ٹیگ کے نام سے فہرست تک رسائی حاصل کریں، اور لاگو کریں “ منتقلی '،' دھندلاپن '، اور ' مرئیت فہرست میں سی ایس ایس کی خصوصیات۔ پھر، استعمال کریں ' : منڈلانا 'سیڈو کلاس اور مرئیت کی قدر کو بطور سیٹ کریں' نظر آنے والا ' اس پوسٹ نے وضاحت کی ہے کہ سی ایس ایس ڈسپلے پراپرٹی پر منتقلی کا اطلاق کیسے ہوتا ہے۔