Question

如果我有一张使用ng-repeat渲染的“简单”牌列表，什么是推荐的方式来过渡到其中一张卡的详细视图？

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

这样的转换是否意味着ng-repeat所基于的集合需要更改，以便它只包含我们正在转换的单个项目，或者其他项目的呈现是否应该使用某个版本的{ {1}}？

Answer 1

它不需要是相同的DOM元素，并且可以说不应该是。动画宽度或高度将导致重新涂抹/回流，并将极大地妨碍性能。

您可以将ng-animate（https://docs.angularjs.org/api/ngAnimate）与单个详细信息元素一起使用，该元素将使用所点击的任何对象填充相关详细信息。

这样的事情：

<强> 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;然后您可以使用关闭按钮来重置这两个范围变量并销毁详细信息元素。

希望有所帮助！

Answer 2

我已经使用有关DOM元素的CSS转换完成了您所描述的内容。我有一个元素列表，当你点击一个元素时，支持对象有一个＆＃39;展开＆＃39; property设置为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;
}

尝试点击＆＃39;摘要1＆＃39;或者＆＃39;摘要2＆＃39;在plunkr

https://plnkr.co/cDkuNjTbE83L5bDJccsJ

从列表到卡片的角度材料设计动画

2 个答案: