将 animation.css 中的 zoomIn 和 zoomout 集成到 Jquery Mobile 并转换 lightSpeedIn 和 lightSpeedout答案

【问题标题】：Integrate zoomIn and zoomout from animation.css to Jquery Mobile and also transitions lightSpeedIn and lightSpeedout将 animation.css 中的 zoomIn 和 zoomout 集成到 Jquery Mobile 并转换 lightSpeedIn 和 lightSpeedout
【发布时间】：2014-07-16 21:55:43
【问题描述】：

我正在使用来自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;

}

提前谢谢你！

【问题讨论】：

标签： jquery css jquery-mobile css-transitions

【解决方案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;
}

【讨论】：

感谢ezanker 的帮助。这正是我所需要的……我将看看jqmtricks.wordpress.com/2014/02/19/… 以了解由animation.css 提供的其他令人惊叹的过渡效果，当然还有你定制的。谢谢。

【解决方案2】：

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

因此，您的 Html 将如下所示。

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

现场演示Check this link

【讨论】：

感谢您的 cmets Husen ...我已经知道如何实现...我指的是我在这个问题的主题中指定的那些...如何实现页面使用 zoomIn 和 zoomOut 与 Jquery Mobile 进行转换，另一个是 lightSpeedIn 和 lightSpeedout...

【解决方案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

【讨论】：