Angular Дизайн анимации материалов

Ответ 1

Вы должны сделать это сами, я думаю.

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

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

Вариант 1

• создать настраиваемую функцию, которая запускается в элементе списка, который щелкнул/постучал, чтобы разместить его в контроллере (или директиве).

• Как только пользователь нажимает/забирает элемент списка, он запускает функцию (консольный тест).

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

  • получить идентификатор элемента clicked/tapped (передать его функции)
  • aimate: здесь у вас есть несколько вариантов, но здесь один: используйте абсолютный именованный вид ui-router (@view_name) и заверните его в контейнер div с overflow: hidden, который имеет inital размеры, соответствующие размерам элемента списка.
  • Определите позицию 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 выпускает его, так как это далеко не идеально. Вы должны не только блокировать прокрутку списка, но и события прокрутки вверх и вниз.

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