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

Question

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

所以我想要设置：

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

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

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

谢谢，任何帮助表示赞赏。

Answer 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