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

جستجو ...


هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

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


پیش نیاز این دوره آموزشی:

انتقال در css

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

انتقال می‌تواند با سرعت‌های مختلفی اجرا شود و همچنین می‌توان آن را با تاخیر یا به صورت آنی اجرا کرد. وضعیت‌های مختلف را هم می‌توانیم با استفاده از شبه کلاس‌ها مانند :hover  یا :active  یا با استفاده از جاوا اسکریپت تعریف کنیم. 

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

چه ویژگی هایی را می توان با ویژگی transition انتقال داد؟

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

تعریف انتقال 

انتقال‌های css با استفاده از ویژگی transition تعریف می‌شود. این ویژگی، در واقع کوتاه شده ویژگی‌های transition-property transition-duration ،transition-timing-function و transition-delay است. برای پیکربندی و کنترل این ویژگی‌ها، لازم است که ابتدا با آنها آشنا شویم.

ویژگی transition-property

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

ویژگی transition-duration

مدت زمان اجرای انتقال

این ویژگی، مدت زمان اجرای انتقال‌ را به واحد ثانیه مشخص می‌کند.

transition-duration: 0.5s
/* defining times for some properties defind for applying transition */
transition-duration: 0.5s, 1s, 2s

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

ویژگی transition-timing-function

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

css از دو کلاس توابع زمانبندی cubic_bezier() و steps() پشتیبانی می‌کند که در ادامه هر کلاس را توضیح خواهیم داد:

تابع زمان بندی ()cubic_bezier 

منحنی بزیر در css

این تابع، یک منحنی بزیر تعریف می‌کند. منحنی بزیر با چهار نقطه p2، p1، p0 و p3 مشخص می‌شود. p0 و p3، که ابتدا و انتهای منحنی را  تعیین می‌کنند، نقاط ثابتی در css هستند و مقادیر آنها نسبی هستند. p0، معادل با مختصه (۰,۰) است و شروع انیمیشن را نشان می‌دهد و  نقطه p3، بیان‌کننده مختصه (۱,۱) است که انتهای انیمیشن را مشخص می‌کند.  

نحو این تابع به صورت زیر است:

cubic-bezier(x1, y1, x2, y2)

پارامترهای ورودی این تابع، مختصات نقاط p1 و p2 را روی منحنی بزیر مشخص می‌کنند. مقادیر x1 و x2 باید مقادیری در بازه [۰,۱] باشند، در غیر این صورت مقادیر نامعتبری خواهند بود. 

در زیر، چند نمونه منحنی cubic-bezier را مشاهده می‌کنید که برای استفاده در css معتبر هستند:

cubic-bezier(0.1, 0.7, 1.0, 0.1)   

cubic-bezier(0, 0, 1, 1)           

cubic-bezier(0.1, -0.6, 0.2, 0)    

cubic-bezier(0, 1.1, 0.8, 4)

تابع زمانبندی ()steps 

نمونه هایی از تابع steps

 این تابع، زمان را به بازه‌های یکسانی تبدیل می‌کند و در هر بازه، انتقال موردنظر یا در ابتدای بازه یا در انتهای آن انجام می‌شود. نحو این تابع به صورت زیر است:

steps(number_of_steps, direction)

 پارامتر اول، یک عدد صحیح مثبت است که تعداد بازه‌ها را مشخص می‌کند. پارامتر دوم که اختیاری است، یکی از دو مقدار "end" یا "start" است که به ترتیب بیان کننده آن هستند که تغییر مقادیر در انتها یا ابتدای بازه‌ها انجام شود. 

/* There is 5 treads, the last one happens 
   right before the end of the animation. */
steps(5, end)

/* A two-step staircase, the first one happening 
   at the start of the animation. */
steps(2, start)

/* The second parameter is optional. */
steps(2)

با در نظر گرفتن توابع زمان‌بندی بالا، مقادیر ممکن برای ویژگی transition-timing-function به صورت زیر است:

  • linear : این تابع، انتقال را با سرعت ثابت و به طور یکنواخت انجام می‌دهد. این تابع، معادل با (cubic-bezier(۰,۰,۱,۱ است. 
  • ease : این تابع، انتقال را به کندی آغاز می‌کند، سپس سرعت آن را زیاد می‌کند و در آخر، آن را به آرامی خاتمه می‌دهد. این مقدار معادل با   (cubic-bezier(۰.۲۵,۰.۱,۰.۲۵,۱ است.
  • ease-in : این تابع انتقالی را با سرعت کم آغاز می‌کند. این مقدار معادل با (cubic-bezier(۰.۴۲, ۰, ۱, ۱  است.
  •  
  • ease-out : این تابع انتقالی را با سرعت کم تمام می‌کند. این مقدار معادل با (cubic-bezier(۰, ۰, ۰.۵۸, ۱ است. 
  • ease-in-out : این تابع، انتقالی را با سرعت کم، آغاز و خاتمه می‌دهد. این مقدار معادل با (cubic-bezier(۰.۴۲, ۰,۰.۵۸,۱ است.
  • (cubic-bezier(n, n, n, n : با این مقدار، می‌توانید یک منحنی بزیر  دلخواه تعریف کنید. 
  • (steps(int, start|end :با این مقدار، می‌توانید یک تابع گام به گام با مقادیر دلخواه خود تعریف کنید.
  • step-end : معادل با مقدار (steps(۱, end است.
  • step-start : معادل با مقدار (steps(۱, start است.

ویژگی transition-delay

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

transition-duration: 5s;

نحو ویژگی کوتاه شده transition، به صورت زیر است: 

transition: <property> <duration> <timing-function> <delay>;

 مثال ها

نمونه کد ساده زیر، ۲ ثانیه پس از اینکه کاربر ماوس خود را بر روی عنصر قرار داد، یک انتقال چهار ثانیه‌ای برای ویژگی font-size  اجرا خواهد کرد . در این انتقال، اندازه نوشته از ۱۴ پیکسل به ۳۶ پیکسل تغییر می‌کند.

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

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

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

زمانی که تعداد مقادیر یک ویژگی از تعداد مقادیر ویژگی transition-property  کمتر باشد، این مقادیر تکرار می‌شوند تا تعداد مقادیر در همه فهرست‌ها با یکدیگر برابر شوند. به عنوان مثال، کد زیر را در نظر بگیرید:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

مقادیر به صورت زیر تکرار می‌شود:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

به طور مشابه، اگر تعداد مقادیر سایر ویژگی‌ها از تعداد مقادیر ویژگی transition-property بیشتر باشد، تعدادی از آنها نادیده گرفته می‌شوند. برای مثال، اگر کد css ما به صورت زیر باشد:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

این کد به صورت زیر درخواهد آمد:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

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

 

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های