Создание анимированного макета 1-3 столбца с использованием Angular

Здесь ситуация:

Я создаю страницу для приложения, которое состоит из навигатора, нижнего колонтитула и тела из трех столбцов.

Первоначально должен отображаться только один столбец. Этот первый столбец будет заполнен интерактивными div (пусть их называют). При нажатии одной из этих карт второй столбец должен открываться сбоку, открывая дополнительную информацию о клике.

Тот же рабочий процесс применяется ко второму столбцу: детали, отображаемые во втором столбце, содержат свои собственные карточки, которые - при нажатии - открывают третий столбец с более подробной информацией о карте во втором столбце.

Второй и третий столбцы также могут быть закрыты, в то время как первый не может.

Я загружаю информацию о столбцах с помощью Angular, и до сих пор у меня не было реальной борьбы с реализацией расположения столбцов 1-3.

Но когда я пытаюсь сделать эту работу гладкой - например, используя анимацию - все становится странно. Я не знаю, как я могу оживить (dis) появление одного из столбцов.

Вот что я до сих пор: пример Codepen

<div class="container" ng-controller="Controller as ctrl">
  <div class="column" ng-repeat="column in ctrl.columns" ng-class="[column.mode, column.color]" ng-show="column.open">
    <button ng-click="ctrl.close(this)" ng-show="column.id != 0">Close</button>
    <p ng-click="ctrl.open(this)">Name: {{column.name}}</p>
    <p>Open: {{column.open}}</p>
    <p>Mode: {{column.mode}}</p>
    <p>Color: {{column.color}}</p>
  </div>
</div>

CSS:

.container {
  height: calc(100% - 50px);
  display: flex;
}

.column {
  padding: 10px 0 0 10px;
  overflow-y: auto;
}

.column-narrow {
  flex: 33;
}

.column-wide {
  flex: 66;
}

.column-full {
  flex: 100;
}

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

Может ли кто-нибудь из вас предложить мне решение CSS (3)? Если мой код можно оптимизировать, пожалуйста, сделайте это, так как я сейчас изучаю Angular.