在初始加载页面转换快照

Question

因此，当页面首次加载并且用户输入输入时，进度条“快照”到第一个位置，而不像其他位置那样轻松。我不确定我做错了什么。这是我的CSS

 .top {
background: #009dff;
position: fixed;
z-index: 1031;
bottom: 0;
left: 0;
transition:all 1s;
height:54px;
}

here's小提琴。按运行然后输入输入。想要？

Answer 1

这是因为你没有给它一个默认宽度，因此它默认为auto。 auto不是可以设置动画的值，因此它会在您第一次为其赋值时捕捉。

尝试将width: 0添加到您的CSS中。