点击的时候利用jquery、css3实现三角或者箭头如丝顺滑地旋

点击前 点击后

因为没有gif，首先脑补一下小三角完美的旋转180度，实现代码如下

html

<li class="left_li1">
              按目的查看
                                 <ul class="dropdown">
                                     <li>按目的查看</li>
                                     <li>按源查看</li>
                                 </ul>
                            </li>
                            <li class="left_li2">按流量
                                <ul class="dropdown">
                                     <li>按流量</li>
                                     <li>按百分比</li>
                                </ul>
                            </li>

css

.left_li1::before{
    position: absolute;
    right: 13px;
    top: 15px;
    width: 0;
    height: 0;
    content: "";
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #169bd5 transparent;
    -webkit-transition: all 0.25s ;
    -moz-transition:  all 0.25s ;
    -ms-transition:  all 0.25s ;
    -o-transition:  all 0.25s ;
    transition:  all 0.25s ;     
}
.left_li2::before{
    position: absolute;
    right: 13px;
    top: 15px;
    width: 0;
    height: 0;
    content: "";
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #169bd5 transparent;
    -webkit-transition: all 0.25s ;
    -moz-transition:  all 0.25s ;
    -ms-transition:  all 0.25s ;
    -o-transition:  all 0.25s ;
    transition:  all 0.25s ;     
   
}
.dropdown{
    position: absolute;
    right: 0;
    left: 0;
    display: none;
    padding: 0;
    border-radius: inherit;
    border: 1px solid #3DDCFC;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    color: #333;
    margin-top: 14px
}
 .dropdown::before{
    position: absolute;
    right: 13px;
    bottom: 100%;
    width: 0;
    height: 0;
    content: "";
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: #fff transparent;
}
.left_li1.active::before{
   transform: rotate(180deg)       
}
.left_li2.active::before{
    transform: rotate(180deg)       
 }
.dropdown li{
    width: 130px;
    font-size: 14px;
    text-align: center;
    color: #333;
    height: 35px;
    line-height: 35px
}

js

   $('.left_li1').on('click',function(){
            $('.left_li2').removeClass('active');   
            $('.left_li2 .dropdown').hide();
            $(this).addClass('active');
            setTimeout(function(){
                $('.left_li1 .dropdown').toggle();
            },200)
            var node=$('.left_li1 .dropdown')
            if(!node.is(':hidden')){
                $(this).removeClass('active');   
            }
            
        })
        $('.left_li2').on('click',function(){
            $('.left_li1').removeClass('active');   
            $('.left_li1 .dropdown').hide();
            $(this).addClass('active');
            setTimeout(function(){
                $('.left_li2 .dropdown').toggle();
            },200)
            var node=$('.left_li2 .dropdown')
            if(!node.is(':hidden')){
                $(this).removeClass('active');   
            }
            
        })

刚开始的时候是采用的.left_li1:active::before{transform: rotate(180deg)}注意active前的冒号，使用伪类，但是点击的时候不能完全旋转，便采用了jquery 添加css3和移除css3的方式。这里有一点注意就是:active在before之前