angularjs - 使用 Angular 创建动画 1-3 列布局

Question

情况是这样的:

我正在为包含导航栏、页脚和 3 列正文的应用程序构建页面。

最初，应该只显示一列。第一列将填充可点击的 div(我们称它们为卡片)。单击其中一张卡片时，第二列应从侧面滑开，显示有关所单击卡片的更多信息。

相同的工作流程适用于第二列:第二列中显示的详细信息包含其自己的卡片，点击后会打开第三列，并在第二列中显示有关该卡片的更多详细信息。

第二列和第三列也可以关闭，第一列不可以。

我正在使用 Angular 加载列信息，到目前为止，我在实现 1-3 列布局方面没有遇到任何困难。

但是当我试图让这项工作顺利时 - 例如使用动画——事情变得很奇怪。我真的不知道如何为每列之一的(消失)外观制作动画。

这是我目前拥有的: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 将以附加类的形式添加动画 Hook ng-hide-add, ng-hide-add-active, ng-hide-remove ，ng-hide-remove-active。

所以这些类被添加到您的 CSS 列。

我实际上只需要添加这些 CSS 行就可以让动画在您的 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;
}

这是更新后的代码笔: http://codepen.io/anon/pen/XbVLxO