我正在使用http://daneden.github.io/animate.css/中的animate.css，我想将2个很酷的转换集成或自定义到我的jquery移动应用程序中，其中一个是zoomIn和zoomOut，另一个是lightSpeedIn和lightSpeedout ....如果有的话的您已经将它们实现为您的移动项目的自定义过渡...请让我知道如何...
例如，此定制适用于bounceIn转换：
.bounceIn.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-ms-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.bounceIn.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-ms-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}
先感谢您！
最佳答案
您可以参考我写的有关使用animate.css进行jQM页面转换的博客文章：
CUSTOM PAGE TRANSITIONS (PART 1)
要使用Lightspeed动画：
.customLightSpeed.in {
-webkit-animation-name: lightSpeedIn;
-moz-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
animation-duration: 750ms;
}
.customLightSpeed.out {
-webkit-animation-name: lightSpeedOut;
-moz-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
animation-duration: 500ms;
}
然后在链接中，将data-transition属性设置为您创建的类。
<a href="#page2" data-transition="customLightSpeed">
要使用缩放动画：
.customZoomTrans.in {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 600ms;
-moz-animation-duration: 600ms;
animation-duration: 600ms;
}
.customZoomTrans.out {
-webkit-animation-name: zoomOut;
-moz-animation-name: zoomOut;
animation-name: zoomOut;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
animation-duration: 500ms;
}
您可以调整动画持续时间值以获得所需的速度。
这是工作中的DEMO
同样在演示中，我包括了一个具有相反方向的缩放过渡：
.customZoomTrans2.in {
-webkit-animation-name: zoomInLeft;
-moz-animation-name: zoomInLeft;
animation-name: zoomInLeft;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
animation-duration: 500ms;
}
.customZoomTrans2.out {
-webkit-animation-name: zoomOutRight;
-moz-animation-name: zoomOutRight;
animation-name: zoomOutRight;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-duration: 400ms;
-moz-animation-duron: 400ms;
animation-duration: 400ms;
}
.customZoomTrans2.in.reverse {
-webkit-animation-name: zoomInRight;
-moz-animation-name: zoomInRight;
animation-name: zoomInRight;
}
.customZoomTrans2.out.reverse {
-webkit-animation-name: zoomOutLeft;
-moz-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
关于jquery - 将animation.css中的zoomIn和zoomout集成到Jquery Mobile，还可以转换lightSpeedIn和lightSpeedout，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24771794/