بنابراین، شما می خواهید ویژگی نمایش را متحرک کنید

گروه کاری CSS چند هفته پیش آن را تأیید کردم. پیشنهاد مفهومی فوق‌العاده این است که ما می‌توانیم متحرک سازی کنیم یا مثلاً از آن گذر کنیم. display: block به display: none.

این کمی ذهن گردان به دلیل تنظیم است display: none روی یک عنصر انیمیشن ها را لغو می کند. و اضافه کردن آن انیمیشن ها را دوباره راه اندازی می کند. بر اساس مشخصات:

تنظیم display دارایی به none هر انیمیشن در حال اجرا اعمال شده بر روی عنصر و فرزندان آن را خاتمه می دهد. اگر عنصری نمایشی از هیچ‌کدام ندارد، نمایشگر به مقداری غیر از آن به‌روزرسانی می‌شود none تمام انیمیشن های اعمال شده بر روی عنصر توسط animation-name ویژگی، و همچنین تمام انیمیشن های اعمال شده برای فرزندان با display به غیر از none.

این رفتار دایره ای چیزی است که باعث می شود مفهوم در بدو ورود مرده به نظر برسد. ولی if @keyframes پشتیبانی از هر display ارزش به غیر از none، پس راهی برای آن وجود ندارد none برای لغو یا راه اندازی مجدد کارها که می دهد غیرnone ارزش اولویت، اجازه می دهد none کار خود را فقط پس از تکمیل انیمیشن یا انتقال انجام دهد.

مال میریام خوش گذرانی (این چیزی است که ما واقعاً اینها را می نامیم، درست است؟) توضیح می دهد که چگونه ممکن است کار کند:

ما دقیقاً بین، مثلاً block و none، اما اجازه می دهد block تا زمانی که چیزها از حرکت باز می مانند و استفاده از آن بی خطر است، دست نخورده باقی بماند none. اینها کلمات کلیدی هستند، بنابراین هیچ مقدار صریحی بین این دو وجود ندارد. به این ترتیب، این یک انیمیشن مجزا باقی می ماند. زمانی که انیمیشن کامل شد، بین دو مقدار جابه‌جا می‌شویم.

این است رابرت فلک's مثال مستقیما از بحث:

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

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

این یک مثال مفید است زیرا نشان می دهد که چگونه فریم اول عنصر را تنظیم می کند display: block، که نسبت به زیربنایی اولویت دارد display: none به عنوان غیر-none ارزش. که به انیمیشن اجازه می دهد بدون اجرا اجرا و تمام شود none لغو یا بازنشانی آن در فرآیند، زیرا فقط حل می شود بعد از انیمیشن.

این مثالی است که میریام در Mastodon به آن اشاره کرده است:

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

ما این بار با یک انتقال روبرو هستیم. زیربنایی display مقدار تنظیم شده است none قبل از هر اتفاقی، بنابراین به طور کامل از جریان سند خارج می شود. حال، اگر بخواهیم این را در حالت شناور انتقال دهیم، شاید به این صورت باشد:

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

... سپس عنصر باید از نظر تئوری محو شود 200ms. باز هم ما در حال جابجایی هستیم display ارزش ها، اما block اولویت داده شده است بنابراین انتقال از قبل لغو نمی شود و در واقع بعد از آن اعمال می شود opacity انتقال خود را به پایان می رساند.

حداقل ذهن من در حال خواندن آن است. خوشحالم که افراد فوق‌العاده باهوشی وجود دارند که به این چیزها فکر می‌کنند، زیرا تصور می‌کنم چیزهای زیادی برای حل کردن وجود دارد. مثلاً اگر چند انیمیشن به یک عنصر اختصاص داده شود چه اتفاقی می‌افتد none بازنشانی یا لغو هر یک از آنها؟ من مطمئن هستم که همه چیز از انیمیشن های بی نهایت، جهت های معکوس و انواع چیزهای دیگر به موقع مورد بررسی قرار خواهند گرفت.

اما چه گام اول فوق العاده جالبی!