Let's discuss the current setup:
I am in the process of creating a webpage for an application that includes a navigation bar, a footer, and a 3-column body layout.
Initially, only one column is visible. This primary column will contain interactive divs known as cards. When a card is clicked, the second column should smoothly slide open, revealing additional information about the selected card.
This same pattern extends to the second column: it will display its own set of cards, which when clicked, will reveal the third column with further details related to the second card.
The second and third columns can be closed, whereas the first column remains open at all times.
I am utilizing Angular to dynamically load content into the columns, and so far, I have successfully set up the 1-3 column structure. However, implementing smooth animations has proven challenging. I am struggling to figure out how to animate the appearance and disappearance of each column seamlessly.
For reference, here is a link to what I have developed so far: 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;
}
Clicking on the name paragraph triggers the expansion of the second and third columns. The colors are placeholder and used for visual differentiation between containers.
If anyone has a CSS(3) solution or suggestions for optimizing my code and enhancing the user experience, please feel free to share. I am currently learning Angular and open to improvements.