Угловая анимация дизайна материалов

Думаю, тебе придется сделать это самому.

Angular-material - это не волшебная палочка, которая копирует принципы анимации Material Design. Руководства по материальному дизайну - это просто рекомендации, и они достаточно свободны, чтобы их можно было взломать - или строго им следовать, в случае приложений Google для Android (собственных или нет).
Я чувствую, что команда angular material уже как маньяки подталкивает к доведите этот замечательный инструмент до версии 1.0 и воспользуйтесь преимуществами новая система маршрутизации в Angular 2, чтобы обеспечить некоторые анимации, подобные той, которую вы хотите получить из коробки. Но это передний край кровотечения, по крайней мере, на данный момент. Хорошие новости заключаются в том, что маршруты будут иметь свои собственные и родственные области просмотра.

AngularJS в некоторой степени начинает охватывать концепцию веб-компонентов Polymer. Прокрутите до «Покажи мне волшебство!» на этой странице и посмотреть эти демонстрации. Экосистема Polymer предоставляет множество уже готовых компонентов для создания вашего приложения. Он довольно большой и заставляет задуматься, почему Polymer не получает того же импульса, что и AngularJS.. Но я отвлекся ...

Опция 1

1. создать настраиваемую функцию, которая запускается при нажатии / касании элемента списка для размещения в вашем контроллере (или директиве).

2. Как только пользователь щелкает / касается элемента списка, запускается функция (консольный тест).

3. Функция должна:

   • retrieve the id of the clicked/tapped item (pass it to the function)
   • animate: здесь у вас есть несколько вариантов, но вот один: используйте ui-router с абсолютным именем view (@view_name) и оберните его в контейнер div с overflow: hidden, который имеет начальные размеры, соответствующие размерам элемента списка.
   • Определите положение xy элемента списка, по которому был выполнен щелчок (пример, предполагая, что вы используете AngularJS с jQuery), и вы передаете его в маршрут «детализация элемента» (см. Выше), поэтому прямоугольник растет с началом координат, точно соответствующим тому месту, где пользовательский интерфейс является моментом щелчка / касания. Анимация, показанная в видео, кажется довольно сложной: «страница сведений об элементе» растет медленнее внизу и быстрее вверху, когда щелкают по нижнему элементу.

Почему абсолютное именованное представление? Поскольку это позволит, с помощью z-индексации, чтобы список оставался под представлением "детали элемента", поэтому, когда пользователь закроет / покинет его, вы можете откатить свою анимацию, и прямоугольник уменьшится до точно таких же размеров и позиция элемента списка. Наконец, вы меняете непрозрачность: 0 и покидаете маршрут.

Вариант 2

Вот примерный макет техники растягивания / прокрутки ионного элемента. Для этого потребуется определить позицию y элемента и использовать ionicScrollDelegate для прокрутите до него. Кроме того, вы бы заморозили основную прокрутку, чтобы пользователь «застрял», пока он не закроет «подробное представление», которое затем отпустит прокрутку.

    $scope.toggleStretchedMode = function(itemID) {

    $scope.stretched = $scope.stretched === false ? true: false;


    if(!$scope.stretched){
        $('ion-item').removeClass('stretched');
        $ionicScrollDelegate.freezeAllScrolls(false);
    }
      else
    {
        $location.hash(itemID);
        $ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
        $ionicScrollDelegate.freezeAllScrolls(true);
        $('#'+itemID).addClass('stretched');
     };

  }

Очень простой JSFiddle, который нужно доработать (щелкнул элемент должен прокрутиться до середины экрана, а затем развернуться).

Обратите внимание, что JSFiddle блокирует только прокрутку колеса мыши. Если кажется, что первый свайп блокируется, но затем ng-click освобождает его, так что он далек от совершенства. Вы должны блокировать не только прокрутку списка, но и события смахивания вверх и вниз.

И инициализируется плохо, работает только второй раз. Но концепция могла быть примерно такой.