انتقال CSS یک راه عالی برای ایجاد تعامل است. بس است, transition به حالت اولیه یک عنصر، و مرورگر انتقال بین دو حالت را متحرک می کند. انتقال برای اندازه عناصر ذاتی مانند auto با این حال، برای چندین دهه برای توسعه دهندگان وب یک مشکل بوده است و تنها گزینه محاسبه پویا ارتفاع با استفاده از جاوا اسکریپت بود.
چالش دیگر شروع انتقال زمانی است که یک عنصر اولین سبک خود را به دست آورد - مانند زمانی که به DOM اضافه می شود یا زمانی که display-ارزش none تغییر می کند. این مقاله نحوه حل این مشکل را با ویژگی های جدید CSS توضیح می دهد calc-size(), interpolate-size, @starting-style و transition-behavior قابل مدیریت است.
راه حل با calc-size()
اگر یک عنصر DOM داشته باشد که از حالت بسته می آید (height: 0) به حالت باز (height: auto) بیشتر می شود، انیمیشن معمولا اجرا نمی شود، حتی اگر transitionدارایی تنظیم شده است. دلیلش این است که مرورگرها از انتقال به اندازه‌های ذاتی مانند آن پشتیبانی نمی‌کنند auto پشتیبانی کنید. جدید calc-size()با این حال، تابع محاسبات را روی این کمیت های ذاتی و بنابراین انتقال ها را امکان پذیر می کند.:
f95f6dcb193aa903adc84ce47bc4a296
را calc-size()-عملکرد هنوز در همه مرورگرها در دسترس نیست. با نگه داشتن نسخه اصلی می توان به عقب نشینی دست یافت height: auto-اعلام قابل دستیابی است.
راه حل با interpolate-size
را interpolate-sizeویژگی به شما امکان می دهد رفتار درونیابی مرورگرها را تنظیم کنید و تصمیم بگیرید که آیا بین کلمات کلیدی مانند auto باید درون یابی شود. به طور پیش فرض، درون یابی فقط بین مقادیر عددی رخ می دهد. با allow-keywords با این حال، می توانید انتقال بین کلمات کلیدی را فعال کنید:
f95f6dcb193aa903adc84ce47bc4a296
توسط شما interpolate-size: allow-keywords بر روی :rootعنصر، شما رفتار جدید را برای کل صفحه فعال می کنید.
انتقال از display:none
مشکل دیگر زمانی بوجود می آید که یک عنصر از display:none به حالت قابل مشاهده منتقل می شود. وجود دارد display یک ویژگی متحرک نیست، هیچ انیمیشنی رخ نمی دهد. توابع جدید CSS در اینجا کمک می کنند @starting-style و transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
با transition-behavior: allow-discrete تضمین می کند که انیمیشن قبل از اجرا شود display-ارزش block در none سوئیچ شده است. این قوانین اجازه می دهد تا انتقال ها حتی در طول یک به روز رسانی اولیه سبک اجرا شوند. را @starting-styleقانون تضمین می کند که انیمیشن به درستی در به روز رسانی سبک اولیه اجرا می شود.
پشتیبانی از مرورگر
در حال حاضر املاک جدید calc-size() و interpolate-size هنوز توسط همه مرورگرها پشتیبانی نمی شود. در کروم آنها در پشت پرچم آزمایشی موجود هستند، اما هنوز در سافاری و فایرفاکس موجود نیستند. به همین ترتیب، پشتیبانی از transition-behavior در کروم و اج وجود دارد، اما در سافاری و فایرفاکس وجود ندارد. امیدوارم در آینده تغییر کند.