با استفاده از انتقال CSS

ساخت وبلاگ

آخرین مطالب

امکانات وب

انتقال CSS راهی برای کنترل سرعت انیمیشن هنگام تغییر خصوصیات CSS فراهم می کند. به جای اینکه تغییرات ملک بلافاصله عملی شود ، می توانید باعث ایجاد تغییرات در یک ملک در طی یک دوره زمانی شود. به عنوان مثال ، اگر رنگ یک عنصر را از سفید به سیاه تغییر دهید ، معمولاً این تغییر فوری است. با فعال کردن انتقال CSS ، تغییراتی در فواصل زمانی رخ می دهد که از منحنی شتاب پیروی می کنند ، که همه آنها قابل تنظیم هستند.

انیمیشن هایی که شامل انتقال بین دو کشور هستند ، اغلب انتقال ضمنی خوانده می شوند زیرا ایالات در بین حالت های شروع و نهایی به طور ضمنی توسط مرورگر تعریف می شوند.

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

انتقال CSS به شما اجازه می دهد تا تصمیم بگیرید که کدام خصوصیات را برای تحریک (با لیست صریح آنها) ، هنگامی که انیمیشن شروع می شود (با تنظیم تأخیر) شروع می شود ، چه مدت انتقال (با تعیین مدت زمان) دوام می آورد و چگونه انتقال اجرا می شود (با تعریفیک تابع زمان بندی ، به عنوان مثال ، خطی یا سریع در ابتدا ، در پایان کند است).

کدام خصوصیات CSS قابل انتقال است؟

نویسنده وب می تواند تعریف کند که کدام خاصیت باید متحرک باشد و از کدام روش. این امکان ایجاد انتقال پیچیده را فراهم می کند. از آنجا که برای تحریک برخی از خصوصیات منطقی نیست ، لیست ویژگی های قابل حمل محدود به یک مجموعه محدود است.

توجه: مجموعه ای از خواصی که می توانند متحرک شوند ، با توسعه مشخصات در حال تغییر است.

توجه: مقدار خودکار اغلب یک مورد بسیار پیچیده است. مشخصات توصیه می کند که از آن استفاده نکنید. برخی از نمایندگان کاربر ، مانند آنهایی که مبتنی بر Gecko هستند ، این نیاز را پیاده سازی می کنند و برخی دیگر ، مانند موارد مبتنی بر WebKit ، کمتر سختگیرانه هستند. استفاده از انیمیشن ها با اتومبیل بسته به مرورگر و نسخه آن ممکن است منجر به نتایج غیرقابل پیش بینی شود و باید از آن جلوگیری کرد.

تعریف انتقال

انتقال CSS با استفاده از خاصیت انتقال Shorthand کنترل می شود. این بهترین روش برای پیکربندی انتقال است ، زیرا جلوگیری از پارامترهای همگام سازی را آسان تر می کند ، که می تواند بسیار ناامید کننده باشد که مجبور شوید وقت زیادی را برای اشکال زدایی در CSS صرف کنید.

شما می توانید اجزای جداگانه انتقال را با زیرنویس های زیر کنترل کنید:

نام یا نام خصوصیات CSS را که باید به آنها اعمال شود ، مشخص می کند. فقط خواص ذکر شده در اینجا در طول انتقال متحرک می شوند. تغییر در تمام خصوصیات دیگر طبق معمول بلافاصله اتفاق می افتد.

مدت زمان انجام انتقال را مشخص می کند. شما می توانید یک مدت واحد را مشخص کنید که در طول انتقال یا مقادیر متعددی در مورد کلیه خصوصیات اعمال می شود تا به هر خاصیت اجازه دهید در یک دوره زمانی متفاوت انتقال یابد.

تابعی را برای تعریف چگونگی محاسبه مقادیر واسطه ای برای خواص مشخص می کند. توابع زمان بندی تعیین می کند که چگونه مقادیر واسطه انتقال محاسبه می شود. بیشتر توابع زمان بندی را می توان با ارائه نمودار عملکرد مربوطه مشخص کرد ، همانطور که توسط چهار نقطه تعریف یک بزر مکعب تعریف شده است. همچنین می توانید ورق تقلب را کاهش دهید.

تعریف می کند که بین زمان تغییر یک ملک چقدر صبر کنید و در واقع انتقال شروع می شود.

انتقال syntax CSS Shorthand به شرح زیر نوشته شده است:

مثال ها

مثال ساده

این مثال یک انتقال اندازه فونت چهار ثانیه ای را با تأخیر دو ثانیه ای بین زمانی که کاربر روی عنصر و آغاز اثر انیمیشن است ، انجام می دهد:

چند ویژگی انیمیشن مثال

محتوای CSS

هنگامی که لیست های ارزش خاصیت از طول های مختلف برخوردار هستند

اگر لیست مقادیر هر ویژگی از سایر موارد کوتاه تر باشد ، مقادیر آن تکرار می شود تا آنها را مطابقت دهد. مثلا:

با این رفتار می شود:

به همین ترتیب ، اگر لیست ارزش هر ویژگی برای ترقی تر از آن طولانی تر باشد ، کوتاه می شود ، بنابراین اگر CSS زیر را دارید:

این تفسیر می شود:

استفاده از انتقال در هنگام برجسته کردن منوها

استفاده متداول از CSS ، برجسته کردن موارد در یک منو است زیرا کاربر نشانگر ماوس را بر روی آنها معلق می کند. استفاده از انتقال آسان است تا اثر جذاب تر شود.

ابتدا منو را با استفاده از HTML تنظیم می کنیم:

سپس ما CSS را برای اجرای ظاهر و احساس منوی خود می سازیم:

این CSS ظاهر منو را ایجاد می کند ، با رنگ های پس زمینه و متن هر دو وقتی عنصر در آن تغییر می کند تغییر می کند: hover و: تمرکز:

نمونه های جاوا اسکریپت

توجه: هنگام استفاده از انتقال بلافاصله پس از استفاده باید مراقب باشید:

  • اضافه کردن عنصر به DOM با استفاده از . AppendChild ()
  • حذف نمایشگر یک عنصر: هیچ کدام ؛ویژگی.

با این رفتار می شود که گویی حالت اولیه هرگز رخ نداده است و این عنصر همیشه در وضعیت نهایی آن قرار داشته است. راه آسان برای غلبه بر این محدودیت ، استفاده از تعداد انگشت شماری از میلی ثانیه قبل از تغییر خاصیت CSS است که قصد انتقال آن را دارید.

با استفاده از انتقال برای صاف کردن عملکرد JavaScript

انتقال ابزاری عالی برای ایجاد همه چیز نرم تر و بدون نیاز به انجام هر کاری با عملکرد JavaScript است. مثال زیر را بگیرید.

با استفاده از JavaScript می توانید اثر انتقال توپ به موقعیت خاصی را انجام دهید:

با CSS می توانید بدون هیچ تلاش اضافی آن را صاف کنید. یک انتقال به عنصر اضافه کنید و هرگونه تغییر هموار اتفاق می افتد:

تشخیص شروع و اتمام انتقال

می توانید از رویداد TransitionEnd استفاده کنید تا تشخیص دهید که یک انیمیشن به پایان رسیده است. این یک شیء انتقال دهنده است که دو ویژگی اضافه شده فراتر از یک شیء رویداد معمولی دارد:

رشته ای که نام ویژگی CSS را نشان می دهد که انتقال آن به پایان رسیده است.

شناوری که نشان دهنده تعداد ثانیه هایی است که انتقال در زمان اخراج این رویداد اجرا شده بود. این مقدار تحت تأثیر ارزش تاخیر انتقال نیست.

طبق معمول ، می توانید از روش addeventlistener () برای نظارت بر این رویداد استفاده کنید:

شما شروع یک انتقال را با استفاده از TransitionRun (آتش سوزی قبل از هرگونه تاخیر) و انتقال (آتش سوزی پس از هرگونه تاخیر) ، با همان نوع شیوه تشخیص می دهید:

توجه: اگر قبل از اتمام انتقال سقط شود ، رویداد TransitionEnd آتش نمی گیرد زیرا یا عنصر نمایش داده می شود: هیچ یک یا مقدار خاصیت انیمیشن تغییر می کند.

آموزش کار در فارکس...
ما را در سایت آموزش کار در فارکس دنبال می کنید

برچسب : نویسنده : Mihayloo بازدید : 48 تاريخ : يکشنبه 6 فروردين 1402 ساعت: 12:52