前端开发日常——CSS动画无限轮播

　　近来没有什么值得写的东西，空闲的时候帮前端的同学做了些大屏上的展示模块，就放在这里写写吧，手把手“需求->设计-> 实现”，受众偏新手向。

目前创新互联公司已为1000多家的企业提供了网站建设、域名、虚拟空间、网站托管、企业网站设计、谷城网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

　　为了直观便于理解，直接把结果贴在上面。

　　如上所示，基本需求比较简单明了， “分页显示供应商、供应占比列表，自动轮播”。

　　一、需求评审

　　该有的环节还是要有，尽管需求简单，评审不能省略，无论形式。开发的同学千万不要真的相信需求就这么简单，否则南辕北辙，出力不讨好，那必定是日常-_-||。

　　于是有丰富填坑经验的开发同学，对于这个简单的模块需求，可能会提出如下的一些问题

　　1. 如果只有一页，要不要轮播？

　　2.每页的轮播间隔频率是多少？

　　3.如果列表没有数据，如何显示这个模块？

　　4.数据的刷新时机？是翻页刷新，轮播一圈刷新，还是其他？

　　5.这个绿色的比值是什么含义？是不是还有红色？

　　6.百分比的小数位？

　　7.如果接口异常比如网络不通，如何表示这种异常？

　　8.供应商的名字会不会有500字那么长？放不下如何布局？

　　……等等

　　以上任何一个未明确的需求，都可能成为你编码完成后的一个bug或优化建议。 o(*￣︶￣*)o。

　　二、设计评审　　

　　关于上面待确认的每一个问题，我们伟大的产品经理都一一耐心的给出了“令人信服的”回答后。还是不能马上开始编码。下面我们需要进行一些技术方案的设计讨论，由技术leader把关。例如：

　　1. 数据流，这个列表的数据，是从数据库中的哪几个表取出的？确认下查询逻辑。

　　2.接口设计，是一次返回前端所有数据，还是支持分页查询。

　　3.性能考虑，查询频率是不是较高，并发是不是大，缺不缺索引，要不要上缓存？

　　4.轮播如何实现？有没有已经集成的轮播控件，是否满足要求，还是需要自己写一个。

　　5.如何进行模块化开发，作为一个模块集成嵌入到整体页面中。

　　……等等

　　明确了以上的问题后，作为前端同学的我，是不是可以开始撸代码了？

　　三、想清楚再写

　　说到这里，

　　一类同学已经开始着手编码了，第一个想到需要写的方法可能是，ajax 去后台请求数据列表的接口。

　　另一类同学，可能仍在构思，如何组织代码，提炼主要的数据结构和功能方法。

　　这里我们显然应该向“另外一类”同学学习。想清楚再写，是一个毫无疑问的好习惯。

　　技术预研

　　实现一个功能，首先要扫除其中的未知技术点，扫除了所有未知之后，才能够优化的组织实现方案。

　　上面的需求对于我这种半吊子前端来说，比较关键的两个技术问题是。

　　1）用什么方案来实现滑动动画。 2）如何实现“无限滚动”。

　　滑动动画——经过一番百度，总结下动画可能的实现方案，包括用JS实现或者用CSS实现。各有优劣，js 兼容性好，控制灵活；CSS性能高，平滑流畅。因为我们的动画非常线性，简单，于是这里我们决定采用CSS动画作为动画的实现方案。

　　通过简单的研究，我们已经弄清楚了，想让一个页面元素具有一个动画效果，可以通过向他添加一个包含了动画关键真的选择器来实现，比如定义一个滑出动画类，把这个css类加到元素上，元素就可以实现滑出的动画效果。

　　无限滚动——思考下滚动页面，虽然对于数据来说可能会分成很多页，但对于屏幕展示来说，实际上最多同时出现两个页面，一个是前一页，一个是当前页。在不滚动的时候只有当前页需要显示。

　　顺着这个思路，滚动这个动作对应，“当前页飞入”“前一页飞出”这两个细分动作，特别的情况是，初始显示时，是没有“前一页”的。

　　那么滚动这个动作大概思路就是，

　　1. 根据当前页号取得对应数据，绘制HTML页面，append到滚动区域，对其添加“飞入”动画

　　2. 根据当前页号取得上一页页面元素，对其添加“飞出”动画，动画结束后将其移除, 仅显示当前页。

　　四、编码实现

　　终于到了编码的时间了。

　　用到的 css 动画类选择器，以及关键帧　

.slip_in_animation{
    animation: slip_in 1s;
}

.slip_out_animation{
    animation: slip_out 1s;
}

/*右侧滑入*/
@keyframes slip_in
{
    from {transform:translateX(100%);}
    to{transform:translateX(0);}

}

/*右侧滑入*/
@keyframes slip_out
{
    from {transform:translateX(0);}
    to{transform:translateX(-100%);}
}

名称栏目：前端开发日常——CSS动画无限轮播
标题URL：http://mswzjz.cn/article/dsopoie.html

网站建设知识

前端开发日常——CSS动画无限轮播

其他资讯