Перекрытие абсолютно позиционируемого 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>

Действие div абсолютно позиционируется с z-index, меньшим чем div содержимого .

Цель состоит в том, чтобы div содержимого перекрывался абсолютно позиционированным действием div без предоставления background-color до содержимого div . Если пользователь проведет пальцем по списку, содержимое div будет переведено в направлении X, чтобы показать действие под ним.

Ссылка на образец https://stackblitz.com/edit/angular-xdgct9

Обратите внимание на содержимое второй строки не использует цвет фона, из-за которого видимое действие.

Есть ли другие способы добиться этого?

Answer 1

Отредактировал ваш stackblitz . так что изначально у класса действия установлено отображение: нет. После анимации для свойства css устанавливается значение

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

, а в вашем css

.action{
  ...
  display:none;
}