CODEWITHSUNDEEP
angularjscss
Pieter VDE
Pieter VDE

Reputation: 2235

Creating an animated 1-3 column layout using Angular

Here's the situation:

I'm building a page for an application which consists of a navbar, a footer and a 3 column body.

Initially, only one column should be shown. This first column will be filled with clickable divs (let's call them cards). When one of these cards is clicked, the second column should slide open from the side, revealing more information about the clicked card.

The same workflow applies to the second column: the details displayed in the second column contains its own cards, which - when clicked - open up the third column with more details about the card in the second column.

The second and third column can also be closed, while the first can not.

I'm loading the column information using Angular, and so far I've had no real struggle implementing the 1-3 column layout.

But when I try to make this work smooth - e.g. using animations - things get weird. I don't really know how I can animate the (dis)appearance of one of each columns.

Here's what I have 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;
}

The second and third column can be triggered by clicking the name paragraph. Don't worry about the colors, they're definitely not final and are used only for a clear visual difference between containers etc.

Can any one of you offer me a CSS(3) solution to this? If my code can be optimised please do, as I'm currently learning Angular.

Upvotes: 0

Views: 509

Answers (1)

DanEEStar
DanEEStar

Reputation: 6280

There is not a lot of code needed to get some basic animations working.

The ng-show and ng-hide directives already provide support for animations out of the box. That means that AngularJS will add animation hooks in the form of additional classes ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active.

So these classes get added to your CSS column.

I literally only had to add these CSS lines to make animations work in your Codepen.

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

Here is the updated codepen: http://codepen.io/anon/pen/XbVLxO

Upvotes: 2

Related Questions