javascript - x秒后隐藏动画元素

我在缩略图上有一类称为工具栏的类，在鼠标悬停时将其移到顶部。

li .toolbar {
    position:absolute;
    top:10px;
    right:0;
    left:0;
    overflow:hidden;
    height:24px;
    padding:0 10px;
    color: #fff;
    -webkit-transition:top .3s;
    -moz-transition:top .3s;
    -o-transition:top .3s;
    transition:top .3s;
}

li:hover .toolbar{
    top:-20px;
}

因此，当我将其移动到顶部20个像素时，我也想隐藏它而不使用z-index。

jQuery或纯CSS有什么办法做到这一点？
谢谢

最佳答案

您可以使用不透明度隐藏工具栏并设置过渡延迟，以使其在特定时间后启动

见代码片段

.li {
  position: relative;
  border: 1px solid #000;
  height: 100px;
}

.li .toolbar {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  overflow: hidden;
  height: 24px;
  width: 24px;
  padding: 0 10px;
  color: #fff;
  background: red;
  transition: top .3s .3s, opacity .3s;
}

.li:hover .toolbar {
  transition: top .3s, opacity .3s .3s;
  top: -20px;
  opacity: 0;

}
}

<div class="li">
  <div class="toolbar"></div>
</div>