前端开发日常——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%);}}js应用于页面元素，飞入飞出，飞出后删除， *动画在结束后并不会改变元素实际位置。所以要在动画结束前，移除元素，避免它回到之前位置，挡住当前页，发生“闪烁”
//页面滑入，要显示的页面this.slipIn = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_in_animation");};//页面滑出， this.slipOut = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_out_animation");//移除上一页,定时比动画稍短，避免闪烁setTimeout(function(){$("#supplierListPage_"+pageNo).remove();},900);};翻页的逻辑，第一次不滚动；滚到头，把最后一页飞出，第一页飞入。
this.switchNext = function(pageNo){//附加生成新的页面var newPageHtml =_this.makePageHtml(pageNo);$("#"+ _this.containerId).append(newPageHtml);//多于一页的情况if(_this.firtshow){_this.firtshow= false;//第一次换页不需要移除之前页面。}else{//前面已经有显示过的页面，需要把前面的页面滚动出去。var olderPage =pageNo -1;if(olderPage <=0){//当前页是第一个，前一页就是最后一页olderPage = _this.totalPage;}_this.slipOut(olderPage);}_this.slipIn(pageNo);};定时滚动到下一页。如果是最后一页，重新开始第一页。
this.startRolling = function(){_this.switchNext(_this.curPage);//按间隔轮播_this.switchTimer =setInterval(function(){if(_this.totalPage == 1)return;if(_this.curPage < _this.totalPage) {_this.curPage++;}else{_this.curPage = 1;}_this.switchNext(_this.curPage);},_this.switchInterval);};写到这里，下面是完整代码，需要的可以参考。
完整的代码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动画无限轮播( 二 )

经验总结扩展阅读

|人过四十，过得好的女人，是这样过日子的

午后的白日梦|火山边的黑色小屋，现实中的诗意生活，大海与山脉近在眼前

知识产权专业就业前景及就业方向好不好薪资待遇怎么样

2023年9月20日修建坟墓吉日一览表 2023年农历八月初六修建坟墓吉日

拼多多百亿补贴化妆品是正品吗

|网红广东雨神退网，许华升和他的矛盾一直存在，到底是谁的错？

2023年9月18日摆渡好不好 2023年9月18日摆渡吉日一览表

ap隔离是什么意思 ap隔离意思简述

7款DIY补水面膜还原嫩白水润肌肤

机油高出上限多少没事,机油尺高出上限一点点有事吗

孩子对写作业抵触如何应对

龙虾隔夜加热还能吃吗,熟龙虾过夜明天热一下可以吃吗龙虾第二天怎么热

男人眼中最具诱惑丁字裤

七鳃鳗吃什么七鳃鳗吃什么东西呢

倒春寒一般持续多久

2022五一西宁旅游哪里玩五一劳动节西宁游玩值得去的地方

鸡毛菜是小白菜还是小油菜,鸡毛菜是什么

怨憎会九宫格怎么解开

p0011故障码怎么解决？

护肤关于铺天盖地的保养护理产品，你怎么看？