前端頁面--天貓右側信息欄彈出效果實現

       今天記錄的是現在很常見的一個頁面效果，那就是類似天貓界面右側購物車的信息展示的效果，下面這個黑色的就是今天的主角——animation

     這個是我畢設里面實現的效果

        雖然沒有真正天貓上面的好看（╯‵□′）╯︵┴─┴，但是畢竟我這個沒有審美的程序猿已經盡力了…….那么我們就來一步步的介紹這個效果的實現過程吧~

        首先，我們先分析一下，都需要實現什么功能，第一，在剛進入頁面的時候是不顯示的，當我們滑動滾動條的時候才會出現右側的信息欄，而當我們返回頁面頂端的時候這個信息欄也會相應的隱藏起來，那么這個效果就很簡單了，只需要將display屬性設置為none就可以隱藏了，而在js中判斷當前滾動條滾動的高度來設置display是block還是none了。

//根據下拉判斷是否顯示隱藏導航
    $(window).scroll(function(){

        //這里我的頂部導航欄的top為116，所以監聽的高度就為116了
        if($(window).scrollTop()>116){

            //當滿足條件時就顯示出右側的信息欄
            $("#sidebar").show();
        }else{

            //當條件不滿足的時候就隱藏右側的信息欄
            $("#sidebar").hide();
            $('.nav-content').removeClass('sidebar-move-left');
        }
    });

       接下來就是顯示出信息欄之后的功能了，那么自然而然的就是那個從右往左滑動的漸入漸出效果了，其實當頁面加載完成之后每一個單獨的信息欄都已經加載完成了，而我只是把它們隱藏了起來，但需要注意的是在這里隱藏這些信息欄使用的不是display：none，而是透明度（opacity），這樣配合動畫效果將透明度從0增加到1才真正的達到了漸入漸出的效果。

     我在這里設置了兩個動畫效果，一個是打開時候的向左移動動畫（sidebar-move-left），一個是向右移動動畫（sidebar-move-right）：

/*信息欄彈出動畫*/
.sidebar-move-left{
    animation-name: sml;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes sml {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translateX(-266px);
    }
}

       我們首先定義一個動畫的名字：sml，然后它是在1s內完成動畫的（animation-duration），並且我們只需要這個動畫播放一次（animation-iteration-count），以及希望對象狀態是停留在動畫結束之后的（animation-fill-mode），下面就是我們真正的動畫效果了，首先是從開始的form設置，這個時候的透明度為0。接着當動畫完成時（to）透明度變為了1，與此同時我們希望這個對象從右向左移動一定的距離（translateX），這樣一個從右往左移動的動畫效果就有了，但這並沒有結束， 因為瀏覽器的兼容問題，我們現在的效果僅僅能在ie瀏覽器下工作，而到了chrome和火狐的時候就需要另外的設置了，當兼容chrome內核的瀏覽器的時候需要在每個屬性前面加上：-webkit-，而火狐的就加上：-moz-，同時下面的@keyframes也要對應的加上不同內核的前綴。

      而剩下的向右收回基本和上面的一樣，僅僅是移動坐標不同罷了。

      現在動畫也有了，馬上就要js來幫助我們將正確的屬性加到正確的位置就好了，在外面加載完頁面的時候就需要將右側信息欄中的每一個圖標都加上一個click事件，同時也要為關閉按鈕添加關閉事件。

//右側信息欄
function Sidebar(){

    //首先先取到每個按鈕的對象
    var prof = $('#prof');
    var asset = $('#asset');
    var brand = $('#brand');
    var broadcast = $('#broadcast');
    var foot = $('#foot');
    var calendar = $('#calendar');

    var close = $('.nav-con-close');

    //接下來就是給每個按鈕綁定對應的click事件了
    close.click(function(){
        $('.nav-content').removeClass('sidebar-move-left');
        $('#sidebar').css('border-left','');
        $('.nav-content').addClass('sidebar-move-right');
    });

    prof.click(function(){
        var prof_content = $('#prof-content');

        //判斷當前信息欄是否為打開狀態，如果是就將其關閉
        if($('.nav-content').is('.sidebar-move-left')){
            $('.nav-content').removeClass('sidebar-move-left');
        }

        /*
           當點擊這個按鈕的時候就為這個信息欄觸發動畫效果，
           並設置一個於右側基本信息欄的邊界線
        */
        prof_content.addClass('sidebar-move-left');
        $('#sidebar').css('border-left','1px dotted #000');

        if(prof_content.is('.sidebar-move-right')){
            prof_content.removeClass('sidebar-move-right');
        }
    });

}

      那么在javascript中的思路就是當點擊關閉按鈕的時候就把每一個信息欄中左移顯示的屬性移除掉並添加逐漸右移的屬性，那么就會顯示出慢慢左移關閉的效果了。

      而單獨點擊每個按鈕的時候就會堅持當前是否為打開狀態，如果不是的話就會移除掉其他信息欄上展開的屬性，並為自己添加左移展開的效果，我在上面的代碼就只展示第一個按鈕的代碼（prof），其他的按鈕和第一個基本類似。

      好了╰(*´︶`*)╯♡~今天的這個效果就完全介紹完了~其實整個的思路還是很簡單的，就是一個對CSS中animation屬性的運用而已，但實際的效果還是很（高大上）的啊~~