Question

我目前正在使用AngularJS，ngAnimate，Angular-Material和UI-Router开发移动Web应用程序。我正在遵循UI / UX部分的Google Material Design规范。

我想动态一个状态变化'Angular方式'，特别是这个'Parent to child' animation

我不知道如何实现这个'电梯＆amp; amp;扩展'动画。

感谢您的帮助！

Answer 1

我猜你必须自己做。

Angular-material不是魔术棒，它复制了Material Design的动画指南。材料设计指南只是指导原则，并且在Google的Android应用程序（内部或非内部）的情况下，足够宽松，可以被黑客攻击或严格遵守。
我的感觉是角质材料团队已经像疯子一样推动将这个超棒的工具带到1.0，并将利用new routing system in Angular 2来提供一些动画，就像你想要开箱即用的那样。但它至少暂时是the bleeding edge of the bleeding edge。on this page。好消息似乎是路线将拥有自己的视口和兄弟视口。

AngularJS开始采用Polymer的Web组件概念。滚动到＆＃34;给我看魔术！＆＃34; check these demos和already-made components to build your app with。 Polymer的生态系统提供了大量the same momentum as AngularJS。它非常大，让你想知道为什么Polymer没有得到ui-router absolute named view。但我离题了......

选项1

创建一个自定义函数，该函数在单击/点击的列表元素上触发，放置在控制器（或指令）中。
用户点击/点击列表元素后，会触发该功能（控制台测试）。
该功能应该：
- 检索点击/点按的项目的ID（将其传递给该功能）
- animate：这里你有几个选择，但是这里有一个选择：使用an example（@ view_name），并将它包装在一个div：container中，其溢出：hidden，其初始尺寸对应于列表项的维度。
- 检测已单击的列表元素的x-y位置（ionicScrollDelegate，假设您将AngularJS与jQuery一起使用），并将其传递给＆＃34;项目详细信息＆＃34;路线（见上文），因此矩形的增长与原点完全对应于UI是点击/点击的时刻。视频中显示的动画看起来非常复杂：＆＃34;项目详细信息页面＆＃34;单击底部项目时，底部变慢，顶部变快。

为什么绝对命名视图？因为它允许使用z-indexing使列表保留在＆＃34;项目详细信息下面＃34;查看，因此当用户关闭/离开它时，您可以回滚动画，矩形将缩回到列表项的尺寸和位置。最后，转换不透明度：0并离开路径。

选项2

这是拉伸/滚动离子项的技术的粗略模型。它需要检测项目的y位置，并使用JSFiddle滚动到它。此外，你会冻结主卷轴，以便用户得到“＃34;”，直到他关闭＆＃34;详细视图＆＃34;然后释放滚动。

    $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');
     };

  }

非常基本的 http://jsfiddle.net/5L52o0Le/ ，需要细化（点击的项目应滚动到屏幕中间，然后展开）。

请注意，JSFiddle仅阻止鼠标滚轮滚动。如果似乎阻止了第一次滑动，那么ng-click会释放它，因此它远非完美。您不仅应该阻止列表滚动，还应该阻止向上和向下滑动事件。

它也很重要，只能第二次运作。但这个概念可能是这样的。

角度材料设计动画

1 个答案:

选项1

选项2