关于:target与定位动画的奇怪现象

时间:2023-08-17 23:17:20

今天在制作首页导航图特效demo时,无意发现一个奇怪的交互现象,故记录

经测试,简化了触发该现象的代码,如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        @keyframes move_top{
            0%{ top: 350px; }
            100%{ top: 0; }
        }
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*去除滚动条*/
            overflow: hidden;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            z-index: -1;
        }
        a{
            display: block;
            width: 100px;
            height: 100px;
            background: #acf;
        }
        #moveBox:target{
            /*使用动画*/
            animation: move_top 1s 1;
        }
    </style>
</head>
<body>
    <div id="moveBox"></div>
    <a href="#moveBox"></a>
</body>
</html>

在点击a标签后,moveBox并未如预期所想从距顶部350px位置到距顶部0px位置,而是a标签从屏幕上方进入屏幕。

去除html的overflow属性后,可发现当点击a标签时,页面出现一个滚动条,同时滚动条的可滚动长度在不断的缩小,同时a标签从上方进入可视区域。

把animation的循环次数从1改成大于1时,从第二次动画开始,动画效果符合预期。

修改moveBox的position属性的值为fixed可不触发该现象。