CSS过渡是跳跃的不透明度淡出

Question

我正在做一个面包屑菜单，一旦菜单变得粘稠，就会有一个链接一直出现在右边，让用户滚动回页面顶部。面包屑<nav>具有position:sticky，事件侦听器用于检测它何时"卡住"。然后我使用CSS来瞄准breadcrumb-arrow<div>，然后过渡它，所以如果用户滚动回去或点击它，它的不透明度会再次淡出。

代码是工作的，但CSS动画使它淡出是跳跃的。具体来说，没有过渡，边界就消失了，<a>标签开始淡出，然后在过渡结束之前就消失了。

HTML:

<nav class="breadcrumbs noselect">
<div class="bread-bag">
<ul class="l-breadcrumb">
<li><a>Link 1</a> &gt; </li>
<li><a>Link 2</a> &gt; </li>
<li><a>Link 3</a></li>
</ul>
<!-- This is what fades in and out -->
<div class="breadcrumb-arrow">
<a class="toTop">&uuarr;</a>
</div>
</div>
</nav>

CSS:

.breadcrumbs {
position: relative;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
width: 100%;
min-height: 50px;
max-height: 50px;
height: 50px;
border-bottom: 1px solid #252524;
background: #101112;
overflow: hidden;
z-index: 20;
top: -1px;
padding-top: calc(0em + 1px);
}
.breadcrumb-arrow {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 48px;
text-align: right;
background: #101112;
border-left: 1px solid #101112;
text-align: center;
line-height: 48px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all 1s linear, visibility 0s;
z-index: 30;
}
.is-pinned .breadcrumb-arrow {
opacity: 1;
visibility: visible;
border-left: 1px solid #232425
}

Answer 1

问题是我在Stackoverflow和其他网站上看到过其他地方发布的代码，人们建议将可见性设置为0s过渡，同时还使用transition: all 1s linear(或其他一些时间持续时间)。

简单地删除visibility 0s和CSS动画将工作良好。

我不确定旧的浏览器是否需要这个，或者这可能是firefox的故障，但是一旦我删除了这个CSS，所有的元素都消失了，没有错误。我只在macOS上测试过Firefox，但希望这对将来的人有所帮助。

.breadcrumb-arrow {transition: all 1s linear}