前端页面--天猫右侧信息栏弹出效果实现

       今天记录的是现在很常见的一个页面效果，那就是类似天猫界面右侧购物车的信息展示的效果，下面这个黑色的就是今天的主角——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属性的运用而已，但实际的效果还是很（高大上）的啊~~

转载于:https://www.cnblogs.com/fuhuixiang/p/4342607.html