18
تشکر

همه چیزی که باید درباره Transitions در CSS بدانید

متحرک سازی در CSS

متحرک سازی در CSS

Transitions راهی ساده و زیبا برای انتقال یک عنصر به صورت انیمیشن است.

در این مطلب قصد داریم به بخش های پیچیده تر Transitions بپردازیم. از زنجیره ها و رویدادها تا شتاب سخت افزاری و توابع انیمیشن


پشتیبانی مرورگرها

Transitions عملا در همه نسخه های Firefox, Safari و Chrome پشتیبانی میشود.و همچنین در IE10 و نسخه های بعد از آن.

مرورگرهای بر اساس Webkit که شامل Chrome و Safari میشوند از پیشوند -webkit- برای شناسایی این کدها استفاده میکنند. اما بزودی این خطا رفع میشود تا با استاندارد W3 یکسان شود.

 


استفاده از Transitions

راه ساده برای استفاده از Transitions استفاده از شبه کلاس ها مانند hover: است. که در آن باید نام خواص و مدت زمان اجرای انیمیشن و تابع انیمیشن تعیین شود.

برای مثال:

در ادامه همراه ما باشید…

 

.element {
    height: 100px;
    transition: height 2s linear;
}
.element:hover {
    height: 200px;
}

زمانی که شبه کلاس hover: فعال میشود ارتفاع به صورت خطی(linear) از 100px به 200px در مدت زمان 2 ثانیه تغییر میکند.

تنها گزینه لازم برای مشخص کردن transition زمان آن است برای دیگر گزینه ها مرورگرها از گزینه های پیش فرض ease برای تابع انیمیشن و all برای خواص پوشش دهنده استفاده میکنند.

به صورتی که در کد بالا استفاده شده مشخصا زیاد انعطاف پذیر نیست و برای اجرا بهتر ما با کمک jquery  با عوض کردن کلاس این کار را انجام میدهیم.

 

.element {
    opacity: 0.0;
    transform: scale(0.95) translate3d(0,100%,0);
    transition: transform 400ms ease, opacity 400ms ease;
}
.element.active {
    opacity: 1.0;
    transform: scale(1.0) translate3d(0,0,0);
}
.element.inactive {
    opacity: 0.0;
    transform: scale(1) translate3d(0,0,0);
}
var active = function(){
    $('.element').removeClass('inactive').addClass('active');
};
var inactive = function(){
    $('.element').removeClass('active').addClass('inactive');
};

در مثال بالا ما از دو Transitions متفاوت استفاده کردیم. با استفاده از کد جاوا اسکریپت ما بین کلاس active و inactive سوئیچ میکنیم.

 


متحرک سازی گرادینت ها

همه خواص css دارای مشخصه Transitions نیستند. به عنوان یک قانون شما فقط قادر به انیمیشن سازی مقادیر مطلق(absolute) هستید. برای مثال شما نمیتوانید ارتفاع یک دایو را از 0px به auto انیمیشن کنید. این مقایر توسط مرورگرها نمیتواند تفسیر شود. به همین دلیل به صورت فوری ارتفاع تغییر میکند.

خاصیت مهم دیگری که نمیتواند انیمیشن سازی شود بکگراند گرادینت ها هستند(رنگ تنها پشتیبانی میشود).  هیچ دلیل فنی پشت این حرکت نیست.

در حال حاظر چند روش خوب وجود دارد. یکی از آنها اضافه کردن شفافیت به گرادینت در زمان انیمیشن سازی به خاصیت background-color است.

برای مثال:

 

.panel {
    background-color: #000;
    background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA);
    transition: background-color 400ms ease;
}
.panel:hover {
    background-color: #DDD;
}

اگر بکگراند شما متوالی هست میتوانید آن را با استفاده از background-position بهتر کنید. به اینجا نگاهی کنید.

آخرین کاری که میتوانید انجام دهید گذاشتن دو دایو روی هم است به این صورت (دمو):

 

.element {
    width: 100px;
    height: 100px;
    position: relative;
    background: linear-gradient(#C7D3DC,#5B798E);
}
.element .inner {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(#DDD, #FAFAFA);
    opacity: 0;
    transition: opacity 1s linear;
}
.element:hover .inner {
    opacity: 1;
}

مطالب بیشتر در blog.alexmaccaw


نظرات این مطلب بسته است.