Как создать анимацию масштабирования с одного ng-представления на другое?

Question

Мой экран будет разбит на 4 равных прямоугольника, каждый из которых будет иметь диаграмму. Я хочу, чтобы пользователь мог щелкнуть по диаграмме и приложению, а затем увеличить масштаб в новом представлении, которое является этой диаграммой в целом.

SO Я хотел бы настройку:

приложение/диаграммы отображает все диаграммы. Затем, когда пользователь выбирает диаграмму (например, график-1), приложение переходит к приложению/диаграммам/диаграмме-1.

Я бы хотел, чтобы диаграмма была нажата, чтобы развернуть ее до тех пор, пока она не займет весь экран (новый вид).

Я открыт для любого подхода к этому. CSS, javascript-библиотеки, хаки (возможно, просто используйте один вид и увеличьте масштаб в выбранном 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