jquery - 将 animation.css 中的 zoomIn 和 zoomout 集成到 Jquery Mobile，并转换 lightSpeedIn 和 lightSpeedout

Question

我正在使用 http://daneden.github.io/animate.css/ 中的 animate.css|并且有 2 个很酷的转换，我想集成或自定义到我的 jquery 移动应用程序，其中一个是 zoomIn 和 zoomOut，另一个是 lightSpeedIn 和 lightSpeedout...。如果你们中的任何一个已经将它们实现为自定义转换对于您的移动元素...请告诉我如何...

例如，此自定义用于 bounceIn Transtions:

.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;

提前致谢!

Answer 1

你可以引用我写的这篇关于使用 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;
}

然后在您的链接中，将数据转换属性设置为您创建的类。

<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;
}

您可以调整动画持续时间值以获得您想要的速度。

Here is a working 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;
}