ایجاد شده در ۲۲ مرداد ۱۳۹۹
سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم
لطفا اضافه کنید
transition : از این پراپرتی برای تغیر حالت یک عنصر با یک افکت خاص که دارای 5 پراپرتی هستش در کار با این‌ها چیز هایی که برای ما مهم است یکی پراپرتی هست که میخاهد این عمل روش صورت گیرد که معمولا روی پراپرتی‌های مشابه میان و اعمال می‌شوند و اون مدت زمانی که باید این عمل روشون صورت بگیرد
چرا استفاده میکنیم ؟ یک موقع هست ما یکسری پرارتی هم در حالت عادی همم در حالت مثلا hover به یک عنصر اومدیم و دادیم و برای مثال میخاهیم وقتی با موس روش رفتیم بیاد و تغیر رنگ بدهد خوب درست کردن این طبق اموزاشای قبلی کاری نداره اما اگر بخاهیم این عمل بیاد و به نرمی اعمال بشود مثلا با یک تاخیر یا درطول چن میلی ثانیه بیاد و این عمل اتفاق بیفتد از این transitionها باید بیایم و استفاده بکنیم
1- transition : برای خلاصه نویسی یکی‌های بعدی هستش که مقدار اولی که میگیرد transition-property و مقدار دوم transition-duration و مقدار سوم میشود transition-timing-function و مقدار چهارم میشود transition-delay
2-transition -property : برای موقعی که میخاهیم تغیر ایجاد شود کدوم پراپرتی مون این عمل transition روش اعمال شودکه طبق مثال بالا مثلا ما میخاهیم رنگ تغیر کند که نام رنگ رو بهش میدهیم حال نام اون پراپرتی که میخاد تغیر کند رو در آن قرار میدهیم یا هم all میگزاریم که یعنی همه پراپرتی‌ها تغیر کنند یا هم اگر خواستیم از چن پراپرتی استفاده بکنیم با , میایم و اون پراپرتی هارو جدا میکنیم
3-transition-duration : برای کنترل مدت زمان تغیرمون هستشن که برحسب میلی ثانیه به اون مقدار میدهیم بازه زمانی اجرای عمل مورد نظر ما
4- transition - delay : میزان تاخیر برای اعمال شدن اون تغیراتی که میخاهیم روشون اعمال کنیم که میزان تغیر براش شروع و پایان رو بررسی میکند
5- transition - timing - function : مربوط به افکت‌ها که این عمل هایی تغیر پراپرتی که داخل اشون میزاریم رو با یک افکت بیاد و اعمالشون بکند که مقادیر متفاوتی رو میگیرد
با استفاده از ویژگی transition - timing - function در CSS میتوان یک منحنی زمانی را با استفاده از یکسری کلمات کلیدی یا تابع ( Cubic Bezier ) جهت کنترل عمل انتقال ( Transition ) مشخص و یا تعریف کرد.
مثلا میتونیم مشخص کنیم که عمل انتقال موقع شروع شدن آروم آروم شروع بشه و بعدش تند بشه و بعدش دوباره آروم آروم به پایان برسه.
1- linear : با یه سرعت یکسان شروع و تا پایان ادامه دارد
2- ease : پیش فرض – آروم شروع میشه بعد تند و در آخر آروم میشه
3- ease - in : در شروع آروم میشود
4- ease-out : در پایان آروم میشود
5- ease-in-out : در شروع و پایان آروم میشود
6-(step (int,start_or_end : پارامتر اول تعداد تکه تکه شدن ( باید عدد مثبت بزرگتر از ۰ باشد )
و پارامتر دوم اینکه از قسمت شروع باشه یا پایان
7- (cubic-bezie (n,n,n,n : استفاده از مکعب بزیر | یک عدد از ۰ تا ۱