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

然后在您的链接中，将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;
}

Answer 2

您必须添加animated类以及任何动画css效果。

所以，你的Html就像是跟随。

<div class="animated bounceIn" >
Animated Demo
</div>

现场演示Check this link

Answer 3

那么，你需要页面滚动的css动画效果吗？正确？

它很棘手，但并不那么难。

首先，您必须将animated和inview类添加到应用动画所需的任何部分。

所以，你的html就像是跟随。

<p style="margin-bottom:900px">FOr Long Scroll Only</p>
<p class="inview animated">Html Value</p>

之后你需要编写一个小的JQuery函数，如下所示。

jQuery(document).ready(function(){})
jQuery('.inview').bind('inview',function(event,visible)
{
    if(visible==true)
    {
        jQuery('.animated').addClass("bounceIn");
    }
    else{jQuery('.animated').removeClass("bounceIn");}
});

Please check this link for live Demo

将animation.css中的zoomIn和zoomout集成到Jquery Mobile，还可以转换lightSpeedIn和lightSpeedout

3 个答案: