خصوصیت transition-property
مثال (خصوصیت transition-property)
روی عنصر div حرکت کنید و یک انتقال روان را با تغییر عرض مشاهده فرمایید:
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
در انتهای این آمورش، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10، Firefox، Chrome و Opera، خصوصیت transition-property را پشتیبانی می کنند.
Safari از خصوصیت جایگزین webkit-transition-property- استفاده می کنند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، تنظیم transition-property را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خصوصیت transition-property می توان نام خصوصیت CSSی که انتقال روی آن خصوصیت صورت می گیرد را مشخص کرد. به عبارتی transition-property نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد.
نکته: انتقال معمولا هنگامی که موس را روی عنصری حرکت دهیم رخ می دهد.
توجه: همواره transition-duration را مشخص فرمایید، در غیر این صورت duration صفر است، و خصوصیت transition کار نمی کند.
| مقدار پیشفرض | all |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.transitionProperty="width,height" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| none |
انتقال روی هیچ خصوصیتی تاثیر نمی گذارد. |
| all |
تمام خصوصیت ها از انتقال تاثیر می پذیرند. |
| property |
لیستی از خصوصیت ها که با کاما از همدیگر جدا شده اند را مشخص می کند که انتقال روی آنها تاثیر دارد. |
مثال - خودتان امتحان کنید
Transition effect - change two properties
با موس روی عنصر div حرکت کنید، و یک انتقال آرام را در ارتفاع و عرض عنصر مشاهده فرمایید.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8504
