如何创建从一个 ng-view 到另一个的缩放动画？答案

【问题标题】：How can I create a zoom animation from one ng-view to another?如何创建从一个 ng-view 到另一个的缩放动画？
【发布时间】：2013-07-25 11:01:57
【问题描述】：

我的屏幕将被分成 4 个相等的矩形，每个矩形都包含一个图表。我希望用户能够单击一个图表，然后应用程序可以放大到一个新视图，即该图表作为整个页面。

所以我想要设置：

app/charts 显示所有图表。然后，当用户选择一个图表（比如 chart-1）时，应用会导航到 app/charts/chart-1。

我希望单击的图表展开到视图中，直到它占据整个屏幕（新视图）。

我对任何方法都持开放态度。 CSS、javascript 库、hacks（也许只使用一个视图并放大选定的 div？）我希望能够通过 url 导航到全屏图表...

谢谢，感谢任何帮助。

【问题讨论】：

标签： javascript css animation angularjs

【解决方案1】：

<div class="wrapper  {selected_class}">
  <div ng-click="selected_class='top-left'" class="top-left"></div>
  <div ng-click="selected_class='top-right'" class="top-right"></div>
  <div ng-click="selected_class='bottom-left'" class="bottom-left"></div>
  <div ng-click="selected_class='bottom-right'" class="bottom-right"></div>
</div>


.top-left .top-left{ transform:scale(2); } etc

【讨论】：