重叠绝对定位的兄弟 div 而不在相对 div 上指定背景颜色

Question

尝试创建滑动到操作列表组件。

<div class="list-container">
    <div class="row">
        <div class="content">
            Some Content 1
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
    <div class="row">
        <div class="content">
            Some Content 2...
        </div>
        <div class="action">
            Delete Action
        </div>
    </div>
</div>

Action div 绝对定位，z-index 小于 content div。

此处的目标是使 content div 与绝对定位的 action div 重叠，而不向 content div 提供 background-color。如果用户滑动列表，内容 div 会沿 X 方向平移，以显示其下方的操作。

示例链接https://stackblitz.com/edit/angular-xdgct9

请注意，第二行的内容没有使用任何背景颜色，因此动作是可见的。

还有其他方法可以实现吗？

Answer 1

编辑了您的stackblitz。以便最初将操作类设置为显示：无。动画完成后，css属性显示设置为block

anim() {
  requestAnimationFrame(() => {
    this.value -= 1;
    if (this.value > -50) {
      this.anim();
      (document.querySelector('.action') as HTMLElement).style.display = 'block'
  }
});

在你的 CSS 中

.action{
  ...
  display:none;
}