侧边栏淡入淡出效果

想要同时操作透明度变化的动画以及display值的变化，淡出效果没问题，淡入的透明度变化显示不了，总是一下子就跳出来。而且跳出来有时候会再消失，推测是定时器造成的，不知如何解决。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
    <style>
        .aside-nav {
            width: 50px;
            position: fixed;
            right: 0px;
            bottom: 50px;
            padding: 10px 8px;
            box-shadow: 0 0 3px 2px rgba(0,0,0,0.5);
            background: #FFF; 
            display: none;  
        }
        .aside-nav__items {
            display: block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            margin: 5px 0;
            text-align: center;
            color:#000;
        }
        .aside-nav__items:hover {
            color:#FF0000;
        }
        .aside-nav {
            opacity:0;
            transition: all 1s linear;
        }
        .aside-nav-appear {
            opacity: 1;
            transition:all 1s linear;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background: grey;"></div>
    <nav class="aside-nav"><!-- 侧边导航 -->
        <a href="javascript:;" class="aside-nav__items">实</a>
        <a href="javascript:;" class="aside-nav__items">商</a>
        <a href="javascript:;" class="aside-nav__items">课</a>
        <a href="javascript:;" class="aside-nav__items">环</a>
        <a href="javascript:;" class="aside-nav__items">云</a>
    </nav>
</body>
<script type="text/javascript">
    var asideNavItems=getEleAll(".aside-nav__items"),
    asideNav=getEle(".aside-nav");
    window.onscroll=function(){
        var top=getTop();
        if (top>200){
             
            addCls(asideNav,"aside-nav-appear");
            asideNav.style.display="block";
        }
        else {  
            delCls(asideNav,"aside-nav-appear");
            setTimeout(function(){
               asideNav.style.display="none";
           },1000); 
        }    
    }
//获取元素函数
function getEle(sel){
    return document.querySelector(sel);
}
function getEleAll(sel){
    return document.querySelectorAll(sel);
}
 
//获取屏幕高度函数
function getTop(){
    return document.documentElement.scrollTop || document.body.scrollTop;
}
    //添加类名函数
    function addCls(ele,cls){
        var baseCls=ele.className;
        if (baseCls.indexOf(cls)==-1){
            ele.className=baseCls+" "+cls;
        }   
    }
//删除类名函数
function delCls(ele,cls){
    var baseCls=ele.className;
    if (baseCls.indexOf!=-1){
        ele.className=baseCls.replace(cls,"");
    }
}
</script>
</html>

慕瓜9218797 2019-01-18

源自：H5+CSS3+JS实现炫酷网页 5-6 作业题

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-01-20 11:59:01

transiton与display不能同时使用，可以给过渡变化添加一个定时器：

关于说的改变定位的right值，是可以同时和透明度实现的，可以再测试下。

收起回答

好帮手慕星星 2019-01-18 18:36:07

你好，测试了你的代码，在200临界值时，block显示与none隐藏（使用定时器的情况下）会有冲突，所以会导致有时候显示出来，然后隐藏，滚动之后再显示。建议使用jquery中淡入淡出方法完成：

可以参考测试下，祝学习愉快！

收起回答

提问者慕瓜9218797 #1

把else里的内容注释掉，只考虑侧边栏从无到有的情况。我的设想是设置block并添加类名，使侧边栏显示的同时触发透明度变化的动画。但不管是先设block还是先添加类名都没有动画效果。我也试过不用display，而是设置right的值。但是只能对透明度和位移同时设定动画，一边从右边滑出一边慢慢变深，无法单独设置透明度的渐变。请问是什么原因呢？

2019-01-18 19:46:21