小动画--C3+Jq

学C3动画有一段时间了，但是编程中比较少用，因为很少有网站做比较炫的动画，于是自己没事做个小Demo，和大家共享一下。
该小demo一般都用在nav栏的菜单显示，动画效果如下：

Honeycam 2017-07-07 16-21-25.gif

该这个动画分两部分，一个是菜单下拉动画，另一个是子菜单内容逐一显示，下拉动画我们使用C3实现，内容显示我们使用jq来实现（因为每个菜单显示时间不同），下面我们来进行实现。
HTML代码

                      <li class="has-dropdown col-xs-2">
                            <a href="product.html">产品&服务</a>
                            <ul class="dropdown">
                                <li><a href="product_1.html" class="icon-bell"><span>安全产品</span></a></li>
                                <li><a href="product_2.html" class="icon-lock"><span>管控产品</span></a></li>
                                <li><a href="product_3.html" class="icon-folder"><span>基础网络</span></a></li>
                                <li><a href="product_4.html" class="icon-cloud2"><span>云产品</span></a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown col-xs-2">
                            <a href="solution.html">解决方案</a>
                            <ul class="dropdown">
                                <li><a href="solution_1.html" class="icon-paper"><span>教育行业</span></a></li>
                                <li><a href="solution_2.html" class="icon-dribbble"><span>金融行业</span></a></li>
                                <li><a href="solution_3.html" class="icon-heart"><span>医疗行业</span></a></li>
                                <li><a href="solution_4.html" class="icon-shop"><span>零售行业</span></a></li>
                                <li><a href="solution_5.html" class="icon-home"><span>政企行业</span></a></li>
                                <li><a href="solution_6.html" class="icon-search"><span>直播行业</span></a></li>
                            </ul>
                        </li>

首先我们要使用C3属性，设置动画类

/*设置动画变化过程*/
@keyframes fadeInUpMenu {
  from {
    visibility: hidden;
    height: 0;
  }

  to {
    visibility: visible;
    height: 120px;
  }
}

/*设置动画时间*/
.animated-time {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

然后我们使用jq操控dom，添加或者删除动画类

//.dropdown为子菜单
function dropdown() {
        var time;
        $('.has-dropdown').mouseenter(function(){
            var $this = $(this);
            $this
                .find('.dropdown')
                .css('display', 'block')
                .addClass('animated-time fadeInUpMenu');
//确保下拉菜单动画加载的差不多再执行子菜单动画，设置setTimeout
            time=setTimeout(function(){
                $this.find('.dropdown li').each(function(i){
                    var thisli=$(this);
                    setTimeout(function(){
                        thisli.animate({"left":"0px","opacity":"1"},500)
                    },i*50)
                })
            },200);
        }).mouseleave(function(){
            var $this = $(this);

            $this
                .find('.dropdown')
                .css('display', 'none')
                .removeClass('animated-fast fadeInUpMenu');

            if(time){
                clearTimeout(time);
            }
            $this.find(".dropdown li").each(function(i){
                var ta=$(this);
                setTimeout(function(){
                    ta.animate({"left":"100px","opacity":"0"},300);
                },50*i);
            });
        });

    };

代码解释：C3动画只是对下拉动画的设置，因为子菜单内容不是同时显示的，而是逐渐显示的，所以每一个子菜单的li标签的显示需要不同的时间段。

小动画--C3+Jq

推荐阅读更多精彩内容