Матрица в виде сетки, совместимая с d3.js и эффектами перехода строк ⇐ CSS

[Anonymous]

У меня есть сетка с несколькими строками и тремя столбцами. Строки представляют собой что-то вроде структуры папок, то есть есть родительский элемент с некоторым дочерним элементом, у которого также может быть несколько дочерних элементов и так далее.
В конце концов я хочу создать разборный дизайн, т.е. при нажатии на родительский элемент отображаются все его дочерние элементы, а последующий щелчок снова скрывает этих дочерних элементов.
Хотя у меня нет проблем с добавлением строк в дизайн, у меня есть некоторые трудности с анимацией добавление строк.
В приведенном ниже примере игрушки вы видите, что строки появляются мгновенно, но мне бы хотелось, чтобы они появлялись легче.
Есть идеи? (Я довольно гибко разбираюсь в сетке и CSS, поэтому, если есть другой способ организации данных, я был бы очень рад адаптироваться).
P.S.: Я поигрался с двумя разными сетчатые конструкции (

Код: Выделить всё

display: contents

и subgrid, и хотя последний вариант кажется каноническим способом получения структуры, подобной матрице, мне не удалось заставить структуру использовать ту же ширину для второго столбца, поэтому любые намеки на эту побочную проблему тоже добро пожаловать.

Код: Выделить всё

function update(data) {
const rows = d3.selectAll('.grid_container')
.selectAll('div')
.data(data, (d) => d.id)
.join('div')
.classed('row', true);
rows.each(function (d, i) {
const enter = d3.select(this);
enter.selectAll('div')
.data(d.content)
.join('div')
.text((d) => d);
})

}

function genRow(i) {
return {
id: i,
content: [...Array(3)].map((_, j) => i == 0 & j == 1 ?
'Super Long Line' : 'Cell ' + (i + 1) + '/' + (j + 1))
}
}

function addRow() {
data.push(genRow(data.length));
update(data);
}

const data = [...Array(2)].map((_, i) => genRow(i));

update(data);

Код: Выделить всё

#contents {
display: grid;
grid-template-columns: 110px max-content auto;
grid-auto-rows: 1fr;
gap: 5px;
}

#subgrid {
display: grid;
row-gap: 5px;
grid-auto-rows: 1fr;
}

#subgrid > .row {
display: grid;
grid-template-columns: 110px max-content auto;
column-gap: 5px;
}

.row {
display: contents;
}

.row > div {
padding: 10px;
}

.row:nth-child(odd) > div {
background-color: forestgreen;
}

.row:nth-child(even) > div {
background-color: purple;
}

Код: Выделить всё

Add Row

display:contents

Код: Выделить всё

subgrid

Подробнее здесь: https://stackoverflow.com/questions/785 ... on-effects