لہذا، آپ ڈسپلے پراپرٹی کو متحرک کرنا چاہیں گے۔

سی ایس ایس ورکنگ گروپ چند ہفتے پہلے اسے انگوٹھا دیا تھا۔. سپر ڈوپر تصوراتی تجویز یہ ہے کہ ہم متحرک یا منتقلی کر سکتے ہیں، کہتے ہیں، display: block کرنے کے لئے display: none.

اس کی وجہ سے ترتیب کے بارے میں استدلال کرنا تھوڑا سا دماغی چکر ہے۔ display: none ایک عنصر پر متحرک تصاویر کو منسوخ کرتا ہے۔ اور اسے شامل کرنے سے متحرک تصاویر دوبارہ شروع ہوجاتی ہیں۔ تفصیلات کے مطابق:

کی ترتیب display پراپرٹی none عنصر اور اس کی اولاد پر لاگو کسی بھی چلنے والی اینیمیشن کو ختم کر دے گا۔ اگر کسی عنصر میں کوئی بھی ڈسپلے نہیں ہے تو، ڈسپلے کو اس کے علاوہ کسی قدر میں اپ ڈیٹ کرنا none عنصر پر لاگو تمام اینیمیشنز کو شروع کر دے گا۔ animation-name پراپرٹی، نیز تمام متحرک تصاویر کے ساتھ اولاد پر لاگو ہوتے ہیں۔ display کے مقابلے میں دیگر none.

وہ سرکلر رویہ وہی ہے جو تصور کو بظاہر پہنچنے پر مردہ بنا دیتا ہے۔ لیکن if @keyframes کسی کی حمایت کی display قیمت کے مقابلے میں دیگر none، پھر کوئی راستہ نہیں ہے۔ none چیزوں کو منسوخ یا دوبارہ شروع کرنا۔ یہ غیر دیتا ہےnone اقدار کی ترجیح، اجازت دیتا ہے none حرکت پذیری یا منتقلی مکمل ہونے کے بعد ہی اپنا کام کرنا۔

مریم کی توت (یہ وہی ہے جسے ہم واقعی میں بلا رہے ہیں، ٹھیک ہے؟) بتاتا ہے کہ یہ کیسے کام کر سکتا ہے:

ہم اس کے درمیان قطعی طور پر مداخلت نہیں کر رہے ہیں، کہتے ہیں، block اور none، لیکن اجازت دیتا ہے۔ block اس وقت تک برقرار رہنا جب تک چیزیں حرکت کرنا بند نہ کر دیں اور اس کا اطلاق کرنا محفوظ ہو۔ none. یہ کلیدی الفاظ ہیں، لہذا ان دونوں کے درمیان کوئی واضح قدریں نہیں ہیں۔ اس طرح، یہ ایک مجرد حرکت پذیری بنی ہوئی ہے۔ اینیمیشن مکمل ہونے کے بعد ہم دو اقدار کے درمیان ٹوگل کر رہے ہیں۔

یہ رابرٹ فلیککی مثال براہ راست سے نکالی گئی ہے۔ بحث:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

یہ ایک مددگار مثال ہے کیونکہ یہ ظاہر کرتا ہے کہ پہلا فریم عنصر کو کس طرح سیٹ کرتا ہے۔ display: block، جسے بنیادی پر ترجیح دی جاتی ہے۔ display: none بطور غیرnone قدر. یہ حرکت پذیری کو بغیر چلنے اور ختم کرنے کی اجازت دیتا ہے۔ none اس عمل میں اسے منسوخ یا دوبارہ ترتیب دینا کیونکہ یہ صرف حل ہوتا ہے۔ کے بعد حرکت پذیری

یہ وہ مثال ہے جس کا حوالہ مریم نے مستوڈون پر دیا ہے:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

ہم اس بار ایک تبدیلی سے نمٹ رہے ہیں۔ بنیادی display قدر مقرر ہے none اس سے پہلے کہ کچھ ہوتا ہے، لہذا یہ دستاویز کے بہاؤ سے مکمل طور پر باہر ہے۔ اب، اگر ہم اسے ہوور پر منتقل کرنا چاہتے ہیں، تو شاید اس طرح:

.hide:hover {
  display: block;
  opacity: 1;
}

پھر عنصر کو نظریاتی طور پر ختم ہونا چاہئے۔ 200ms. ایک بار پھر، ہم درمیان ٹوگل کر رہے ہیں۔ display اقدار، لیکن block کو ترجیح دی جاتی ہے لہذا منتقلی سامنے سے منسوخ نہیں ہوتی ہے اور اصل میں اس کے بعد لاگو ہوتی ہے۔ opacity اس کی منتقلی کو ختم کرتا ہے.

کم از کم اس طرح میرا دماغ اس میں پڑھ رہا ہے۔ مجھے خوشی ہے کہ بہت ذہین لوگ ہیں جو ان چیزوں کے بارے میں سوچ رہے ہیں کیونکہ میں تصور کرتا ہوں کہ حل کرنے کے لئے ایک ٹن ہے۔ جیسے، کیا ہوتا ہے اگر ایک سے زیادہ متحرک تصاویر کسی عنصر کو تفویض کی جاتی ہیں - مرضی none ان میں سے کسی کو دوبارہ ترتیب دیں یا منسوخ کریں؟ مجھے یقین ہے کہ لامحدود اینیمیشنز، الٹ ڈائریکشنز، اور ہر طرح کی دوسری چیزوں سے ہر چیز پر وقت پر توجہ دی جائے گی۔

لیکن کیا سپر ٹھنڈا پہلا قدم ہے!