shift

ترفند اجراي خصوصيت Transition در دستگاه‌های مجهز به سیستم‌عامل iOS

ترفند اجراي خصوصيت Transition در دستگاه‌های مجهز به سیستم‌عامل iOS

عاطفه
دسته: طراحی وبسایت  تگ ها: transition در ios , خصوصیت transition در سیستم عامل ios , آیا transition در ios ساپرت می شود , حل مشکل transition در ios ,

 

Transition در لغت به معنی انتقال است و یکی از مهم‌ترین ویژگی‌ها در CSS3 است که به ایجاد افکت‌های مختلف می‌پردازند. Transition ها در مرورگرهای Opera, Safari, Firefox, Chrome, IE10 پشتیبانی می‌شود و ساختار آن به شکل زیر است.

-webkit -transition:
-o-transition
-ms-transition
transition

ولی متأسفانه transition در iOS به‌سادگی پشتيباني نمی‌شود و به‌صورت عادي قادر به انجام کاری نیست حال برای رفع این مشکل چه‌کاری می‌توان انجام داد؟
موضوع بحث ما در این مقاله این است که ما بتوانیم با راه‌کاری ساده ولی کاربردی این مشکل را رفع کنیم.
قابل‌ذکر است که می‌توان از جاوا اسکریپت استفاده کرد ولی استفاده از آن‌ها نیز پیچیدگی‌های خود را دارد.
همان‌طور که می‌دانید تمام‌کارهایی كه توسط اشاره‌گر (ماوس) فعال می‌شوند و عامل آن‌ها كدهاي CSS باشد، علاوه بر کلاس اصلی دارای یک کلاس hover نیز می‌باشد كه transition نيز از اين قاعده مستثنا نيست.
خصوصیت cursor: pointer در CSS قابل‌تعریف است و این خصوصیت باعث می‌شود تا به‌محض قرار گرفتن اشاره‌گر بر روي المان موردنظر شكل آن به‌صورت دست تغيير كند كه نشانگر حالت قابل انتخاب می‌باشد.
خصوصیتی که در بالا تعریف شد را در كلاس اصلي CSS مربوط به transition قرار می‌دهیم.
دلیل این کار چیست؟
این کار باعث می‌شود که tap روی صفحه لمسي دستگاه‌های با سیستم‌عامل iOS، به‌عنوان کلیک ماوس شناسایی شود و کلاس hover فعال شود و transition به‌خوبی اجرا شود. لازم به ذكر است كه تمامي مرورگرها مانند سافاري و كروم به‌صورت عادي با اين مشكل روبه‌رو هستند كه با اين ترفند می‌توان اين مشكل را روي آن‌ها برطرف نمود.
قابل به ذکر است که این ترفند فقط بر روی iOS بکار می‌رود.
مثال:

<html>
<head>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
.rectangle{
    width: 600px;
    height: 400px;
    background:#f2f2f2;
    border-radius:10px;
    margin-top:10px;
    border-top-color:#f94616;
    border-top-width:50px;
    border-top-style:solid;
    transition-delay:0.2s;
    transition-duration:1s;
    -webkit-transition-delay: 0.2s;
    -webkit-transition-duration: 1s;
    cursor:pointer;
}

.rectangle:hover{
    border-top-width:0px;
    transition-delay:0.2s;
    transition-duration:1s;
    -webkit-transition-delay: 0.2s;
    -webkit-transition-duration: 1s;
    color:transparent;
    overflow:hidden;
}

امیدوارم که این مطلب مفید واقع‌شده باشد.

نظر خود را بنویسید...
ارسال نظر
لغو