Создание анимированного 1-3 расположение колонок, используя угловые

Question

Вот ситуация:

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

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

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

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

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

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

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

<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.

Answer 1

Существует не так много кода, необходимый для работы некоторых основных анимаций.

Директивы ng-show и ng-hide уже предоставляют поддержку анимации из коробки. Это означает, что AngularJS добавит анимационные крючки в виде дополнительных классов ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active.

Итак, эти классы добавляются в ваш CSS column.

Мне буквально приходилось добавлять эти линии CSS, чтобы анимация работала в вашем кодеде.

.column.ng-hide-add.ng-hide-add-active, 
.column.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition: all linear 0.5s; 
    transition: all linear 0.5s; 
} 

Вот обновленный codepen: http://codepen.io/anon/pen/XbVLxO