css转换-从列表到卡片的角度材质设计动画

Question

如果我有一个使用ng repeat渲染的"简单"卡片列表，建议如何转换到其中一张卡片的详细视图？

这样的转换是否意味着相同的HTML/DOM元素需要留在屏幕上，并且其内容需要更改？

这样的转换是否意味着ng repeat所基于的集合需要更改，以便它只包括我们正在转换到的单个项，或者其他项的呈现是否应该使用某种版本的ng-if="item.id=focused_item_id"？

Answer 1

它不需要是同一个DOM元素，也可以说不应该是。设置宽度或高度的动画会导致重新绘制/回流，并极大地阻碍性能。

您可以使用ng-animate(https://docs.angularjs.org/api/ngAnimate)使用一个单独的detail元素，该元素将填充来自单击的任何对象的相关详细信息。

类似这样的东西：

HTML

<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
  <div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
  <div>Details for {{currentItem}}</div>
</div>

CSS

.details {
  position: fixed;
  width: 100%;
  transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
  opacity: 0;
  transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
  opacity: 1;
  transform: scale(1);
}

所以getDetails()会做一些类似于设置$scope.showDetails = true;和设置$scope.currentItem = el;的事情。然后你可以有一个关闭按钮来重置这两个范围变量并销毁detail元素。

希望能有所帮助！

Answer 2

我已经在所讨论的DOM元素上使用CSS转换完成了您所描述的内容。我有一个元素列表，当你点击其中一个时，支持对象的"expand"属性设置为true，这会使额外的内容可见并调整大小。

HTML

<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
    <div ng-click="el.expand = !el.expand">Summary</div>
    <div ng-if="el.expand">Details</div>
</div>

CSS

div.element {
    transition: 0.5s linear all;
    height: 200px;     
}
div.element.expand {
    height: 500px;
}

尝试点击plunkr 中的"摘要1"或"摘要2"

https://plnkr.co/cDkuNjTbE83L5bDJccsJ