iPhone 使用 webkit-transform 翻译 3d
Posted
技术标签:
【中文标题】iPhone 使用 webkit-transform 翻译 3d【英文标题】:iPhone using webkit-transform translate 3d 【发布时间】:2012-01-18 23:31:12 【问题描述】:我正在使用:
Data.$notification
.delay(1500)
.animate(
right: '+=' + (Data.$notification.width() + 45)
, 700)
.delay(2500)
.animate(
right: '-=' + (Data.$notification.width() + 45)
, 700, function()
$(this).remove();
);
但它不够流畅,所以我想使用翻译 3D css 的人的建议。 ATM 我不能让它工作,我试过了:
Data.$notification
.delay(1500)
.addClass('move-into-view')
.delay(2500)
.removeClass('move-into-view').addClass('move-outof-view')
.delay(1500)
.remove();
在哪里
.rotate-notification.move-into-view
-webkit-transform: translate3d(-175px, 0, 0);
.rotate-notification.move-outof-view
-webkit-transform: translate3d(175px, 0, 0);
这真的可能吗?还是我走错了路?
【问题讨论】:
我在您的 CSS 中没有看到您实际定义-webkit-transition
s 的任何地方。
【参考方案1】:
.delay()
仅适用于队列:
.delay() 方法最适合在队列 jQuery 之间进行延迟 效果。因为它是有限的——例如,它没有提供一种方法来 取消延迟——.delay() 不是 javascript 原生的替代品 setTimeout 函数,可能更适合某些用途 案例。
来源:http://api.jquery.com/delay/
所以建议的路线是:
setTimeout(function ()
Data.$notification.addClass('move-into-view');
setTimeout(function ()
Data.$notification.removeClass('move-into-view').addClass('move-outof-view');
setTimeout(function ()
Data.$notification.remove();
, 1500);
, 2500);
, 1500);
您还需要在 CSS 中为动画设置 transition
规则:
.rotate-notification
-webkit-transition : -webkit-transform 1.5s ease-in-out;
-moz-transition : -moz-transform 1.5s ease-in-out;
-ms-transition : -ms-transform 1.5s ease-in-out;
-o-transition : -o-transform 1.5s ease-in-out;
transition : transform 1.5s ease-in-out;
.rotate-notification.move-into-view
-webkit-transform : translate3d(175px, 0, 0);
-moz-transform : translate(175px, 0);
-ms-transform : translate(175px, 0);
-o-transform : translate(175px, 0);
transform : translate(175px, 0);
.rotate-notification.move-outof-view
-webkit-transform : translate3d(0, 0, 0);
-moz-transform : translate(0, 0);
-ms-transform : translate(0, 0);
-o-transform : translate(0, 0);
transform : translate(0, 0);
这是一个演示:http://jsfiddle.net/vJHvA/4/
请注意,如果您不使用 Modernizr 之类的东西来检查浏览器兼容性并进行相应调整,那么您可能会破坏 Mobile Safari 以外的浏览器中的功能(例如,同时也是 WebKit 浏览器的 android 浏览器)。
【讨论】:
再次感谢您的回答 Japser,真的很棒 :) 好痛苦哈哈,不过我必须这样做,iPad 应用模式下的动画很糟糕!以上是关于iPhone 使用 webkit-transform 翻译 3d的主要内容,如果未能解决你的问题,请参考以下文章
iPhone:如何使用 AVAudioPlayer 检测 Iphone/Ipod 音量级别
更新为 iPhone 5 制作的 XIB 以与 iPhone 6 和 iPhone 6 Plus 一起使用