“造轮子“—使用Zepto.js(jQuery)开发H5滑动插件(二)

发送到手机
使用"扫一扫"即可发送至手机

前面一篇文章我们介绍了H5滑动插件基本功能的开发,也就是让它通过手指操作实现逐屏滑动,仅此而已,这只是满足了我们 进行信息展示的基本需求,一个稍微完善的H5动画也需要一些内部元素的动画效果,现在我们就通过一些操作让这些元素动起来。 这次我们需要依赖一个动画类库。


animate.css


animate.css是一个依赖CSS3的动画样式文件,里面封装了大量的常用动画。 animate.css的使用非常简单,我们只需要在html里引用它,然后在需要执行动画的元素里添加你需要的动画类即可。如下:


<head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head><

h1 class="animated infinite bounce">Example</h1>


其中animated类是必须的,infinite表示是否循环,bounce是你要执行的动画名称。


animate.css的官方文档里也介绍了一些使用jQuery调用animate的方法


$('#yourElement').addClass('animated bounceOutLeft');//回调方法$('#yourElement').one('webkitAnimationEnd', doSomething);//定义一个公共方法$.fn.extend({    animateCss: function (animationName) {        var animationEnd = 'webkitAnimationEnd animationend';        this.addClass('animated ' + animationName).one(animationEnd, function() {            $(this).removeClass('animated ' + animationName);        });    }});$('#yourElement').animateCss('bounce');


在前面得dxslider.js里调用animate


在H5中调用animate可能比上面要少许复杂一点,因为我们需要考虑:


动画是在翻页后执行而不是立即执行

动画在同一页面内的执行顺序可能不同

为了满足这两点需求,我们需要在html文件里加上两个自定义属性


<div id="page1" class="page">     <p class="animated" data-animation="fadeInUp" >animation1</p>     <p class="animated" data-animation="fadeInDown" data-delay="400">animation2</p></div>


这样我们就可以通过访问元素的data属性在适当的时候为元素赋予动画效果,如下面这样


.animated{  display:none}

$(".current .animated").each(function() {    var $this = $(this);    if ($this.data('delay')) {      window.setTimeout(function() {        $this.show().addClass($this.data('animation'));      }, parseInt($this.data('delay'), 10));    } else {      $this.show().addClass($this.data('animation'));    }  })


这样一来我们又会发现问题,只有首页的动画会有效果,因为当前的H5页面实际在一个文件中,而我们循环的是 整个H5动画中的元素,所以我们需要为该动画添加一个回调函数,也就是当翻页之后再执行当前页面的动画效果


function animation(){  //上面的代码} $document.on('webkitAnimationEnd webkitTransitionEnd', '.page', function() {   animation()});


OK,现在我们的H5算是有那么点灵性了,但是,由于我们采用的伪翻页,这样每次翻页时的背景就都是最后一页, 那么,怎么去解决这个问题呢,这个和大家一起思考,下次再见~demo请戳


“造轮子“—使用Zepto.js(jQuery)开发H5滑动插件(二)

“造轮子“—使用Zepto.js(jQuery)开发H5滑动插件(二)

分享:

标签: