كيف يمكنني جعل عنصر يخفضوا إلى أي شيء باستخدام CSS الانتقال على اي فون؟
سؤال
وأنا أحاول أن استخدام الخصائص فون سفاري الملكية -webkit-transition
و-webkit-transform
لجعل عنصر تختفي مع الرسوم المتحركة رشيقة. الرمز:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
وأتوقع عنصر لتقليص وصولا الى غير مرئية مع الرسوم المتحركة رشيقة.
وهذا يعمل بشكل جيد على سطح المكتب سفاري (3.2.1 (5525.27.1) على OS X 10.5.6)، ولكن على اي فون (فون OS 2.2.1 (5H11))، وdiv
يختفي فجأة فقط.
هل هناك أي طريقة لجعل عمل الرسوم المتحركة مثل <وأ href = "https://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/chapter_5_section_1.html#//apple_ref/ وثيقة / رمز المستخدم / TP40008032-CH4-SW1 "يختلط =" نوفولو noreferrer "> وثائق أبل (التسجيل مطلوب، على ما أظن) تقول انها ينبغي؟
المحلول
وتعيين الوسيطة scale
الأولى إلى عشري صغير جدا، بدلا من 0، يبدو لجعل عمل الرسوم المتحركة. الرمز:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0.000001,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
ولست متأكدا إذا كان هذا هو علة فون أو لا، ولكن يبدو ان الامر.