前端開發日常——CSS動畫無限輪播

来源:https://www.cnblogs.com/uncleguo/archive/2022/10/20/16809968.html
-Advertisement-
Play Games

近來沒有什麼值得寫的東西，空閑的時候幫前端的同學做了些大屏上的展示模塊，就放在這裡寫寫吧，手把手“需求->設計-> 實現”，受眾偏新手向。 為了直觀便於理解， 直接把結果貼在上面。 如上所示，基本需求比較簡單明瞭， “分頁顯示供應商、供應占比列表，自動輪播”。 一、需求評審 該有的環節還是要有，儘管 ...


　　近來沒有什麼值得寫的東西，空閑的時候幫前端的同學做了些大屏上的展示模塊，就放在這裡寫寫吧，手把手“需求->設計-> 實現”，受眾偏新手向。

　　

　　為了直觀便於理解， 直接把結果貼在上面。

　　如上所示，基本需求比較簡單明瞭， “分頁顯示供應商、供應占比列表，自動輪播”。

 

　　一、需求評審

　　該有的環節還是要有，儘管需求簡單，評審不能省略，無論形式。開發的同學千萬不要真的相信需求就這麼簡單，否則南轅北轍，出力不討好，那必定是日常-_-||。

　　於是有豐富填坑經驗的開發同學，對於這個簡單的模塊需求，可能會提出如下的一些問題

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

　　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%);}
}
View Code

 

完整JS：

function SupplierListTable(){

    var _this = this;
    //echart 圖表對象。

    //輪播間隔 毫秒
    this.switchInterval = 5000;

    //當前輪播的頁，從1開始
    this.curPage=1;

    //每頁條數
    this.pageSize = 5;

    //當前數據對應總頁數
    this.totalPage = 0;

    //數據列表
    this.chartDataList = new Array();


    //第一次展示標誌
    this.firtshow =true;

    this.containerId = null;
    //輪播定時器
    this.switchTimer = null;

    this.init  = function(containerId){
        _this.containerId = containerId;
        //初始化圖表
        $("#"+containerId).html("");
        _this.reloadData(containerId);
    };


    this.getTotalPage = function(){
       var totalPage  = Math.ceil(_this.chartDataList.length/_this.pageSize);
       return totalPage;
    };

    this.reloadData =function(containerId){


        //從網路請求數據。

        setTimeout(function(){

            _this.chartDataList= [
                {name:"供應商1",percent:"12%"},
                {name:"供應商2",percent:"13%"},
                {name:"供應商3",percent:"14%"},
                {name:"供應商4",percent:"15%"},
                {name:"供應商5",percent:"16%"},
                {name:"供應商6",percent:"13%"},
                {name:"供應商7",percent:"14%"},
                {name:"供應商8",percent:"15%"},
                {name:"供應商9",percent:"16%"}

                ];


            _this.totalPage = _this.getTotalPage();
            _this.curPage = 1;


            _this.stopRolling();
            _this.startRolling();

        },300);

    };


    this.stopRolling= function(){
        if(_this.switchTimer != null){
            clearInterval(_this.switchTimer);
            _this.switchTimer = null;
            _this.curPage = 0;
        }
    };


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

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

    //生成指定頁的html。
    this.makePageHtml = function(pageNo){

        var startRecIndex=  _this.pageSize * (pageNo - 1);
        var endRecIndex =   _this.pageSize *  pageNo ;

        if(endRecIndex > _this.chartDataList.length){
            endRecIndex = _this.chartDataList.length;
        }

        var html = "<div style='width: 100%;  box-sizing: border-box;position: absolute;padding: 20px;' id='supplierListPage_" +pageNo+"'>";
        for (var i = startRecIndex; i < endRecIndex; i++) {
            html+= "<div style=' margin-bottom: 10px  ;border-bottom: 1px solid #484752;'><span style='color: white'>" +_this.chartDataList[i].name+"</span>  <span style='float: right;color: #0c9c6e'>"+_this.chartDataList[i].percent+"</span></div>"
        }
        html+="</div>"

        return html;
    };

    //頁面滑入，要顯示的頁面
    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);
    };

}


$(document).ready(function(){

    var containerId = 'supplierListChart';

    var supplierListTable = new SupplierListTable();
    supplierListTable.init(containerId);

});
View Code

 

HTML頁面容器：

<div  style="height: 300px;width:400px;overflow-x: hidden;position: relative" id="supplierListChart" >
</div>
View Code

 

本文來自博客園，作者：鍋叔
轉載請註明原文鏈接：https://www.cnblogs.com/uncleguo/p/16809968.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [20221018]本地運行與遠程運行.txt
    定義：select語句中嵌套select語句，被嵌套的select語句是子查詢。 子查詢可以出現在： select ....(select).. from ....(select).. where ....(select).. 1.where後面嵌套子查詢 select * from emp whe ...
  • 以開發之名|鬥羅大陸：創造一個盡情探險的開放式游戲世界
    2008年，《鬥羅大陸》正式發行，成為了風靡一時的長篇玄幻小說。小說講述了穿越到鬥羅大陸的唐三如何一步步修煉武魂，由人修煉為神，最終鏟除了邪惡力量，成為了鬥羅大陸最強者的故事。此後數十年，《鬥羅大陸》成為了一代人心目中珍貴的記憶。每個鬥羅迷藉由小說想象了一個屬於自己的鬥羅大陸，可以在裡面組隊修真、盡 ...
  • 區服分析丨更透徹的游戲營運數據解讀，助力高效增長
    全民買量時代，新服和新區持續增開，對玩家長線留存及付費提升顯得尤為重要。在分析游戲活動效果和玩家營運數據時，相信大家都曾有過這樣的疑問： 不同區服玩家的表現如何對比分析？ 怎樣合理評估新開區服對玩家迴流的持續吸引力？ 高性價比的新服激勵是否有效提升了ARPU? … HMS Core分析服務全新上線6 ...
  • 為自己的博客園添加motto漂浮效果^_^
    下麵是我自己寫的一個功能，先分析下思路： 效果使用@keyframes幀動畫，屬性使用opacity和transform motto是有限的，而漂浮是無限的，需要迴圈有限的motto不斷創建新的漂浮 用一個pool來容納漂浮，在無操作的時候清空pool 本來是隨便寫寫的，但是改著改著...怎麼看起來 ...
  • 每日演算法：駝峰轉換，判斷連續字元
    每日演算法 今日是： 1、將字元串轉換為駝峰格式 2、判斷字元串中是否有連續重覆的字元 將字元串轉換成駝峰格式 // css 中經常有類似 background-image 這種通過 - 連接的字元，通過 javascript 設置樣式的時候需要將這種樣式轉換成 backgroundImage 駝峰格 ...
  • Dva.js 快速上手指南
    先說些廢話 最近在開發React技術棧的項目產品，對於數據狀態的管理使用了Dva.js，作為一個資深的ow玩家，我看到這個名字第一反應就是————這不是ow里的一個女英雄嗎?仔細閱讀了官方文檔之後，發現開發者還真是因為這個角色獲得靈感，來命名這個數據狀態管理插件，果然開發大佬都是工作和休閑兩不誤~ ...
  • react-項目結構
    react環境搭建 1.安裝安裝nodejs()。 2.安裝npm或者yarn或cnpm()。 3.安裝react腳手架create-react-app： npm install -g create-react-app 或 cnpm install -g create-react-app 或 yar ...
  • 記錄--一些看起來很叼難的前端面試題
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1.ajax最大的缺陷 「對搜索引擎不友好，並且存在跨域問題限制」 搜索引擎會屏蔽掉所有baijavascript代碼du， 那麼ajax載入的內容對於搜索引擎來說zhi也是透明的。建議重要的頁面信dao息不要AJAX。用AJAX只是載入 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類