角度材料设计动画

Question

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

我想动画状态改变'Angular方式',特别是这个'Parent to child'动画

我不知道如何实现这种"提升和扩展"动画.

谢谢你的帮助 !

Answer 1

我想你必须自己做.

角度材料不是魔术棒,它复制了Material Design的动画指南.材料设计指南只是指导原则,并且在Google的Android应用程序(内部或非内部)的情况下足够宽松,可以被黑客攻击或严格遵守.
我的感觉是角质材料团队已经像疯子一样推动将这个超棒的工具带到1.0,并将利用Angular 2中的新路由系统来提供一些动画,例如你想要开箱即用的动画.但这是最前沿的前沿,至少目前是这样.好消息似乎是路线将拥有自己的视口和兄弟视口.

AngularJS开始接受Polymer的Web组件概念.滚动到"告诉我神奇!" 在这个页面上,检查这些演示.Polymer的生态系统提供了许多已经制作的组件来构建您的应用程序.它非常大,让你想知道为什么Polymer没有得到与AngularJS相同的动力.但我离题了......

选项1

1. 创建一个定制的函数,该函数在单击/点击的列表元素上触发,放置在控制器(或指令)中.

2. 一旦用户单击/点击列表元素,它就会触发该功能(控制台测试).

3. 该功能应该:

   • 检索点击/点击项的ID(将其传递给函数)
   • animate:这里你有几个选择,但是这里有一个:使用ui-router绝对命名视图(@view_name),并将它包装在一个带有overflow:hidden的div容器中,它具有与列表项的维度相对应的初始维度.
   • 检测已单击的列表元素的xy位置(例如,假设您使用带有jQuery的AngularJS),并将其传递给"项目详细信息"路径(参见上文),因此矩形的增长与原点完全对应于哪里用户界面是点击/点按的时刻.视频中显示的动画看起来相当复杂:单击底部项目时,"项目详细信息页面"在底部变慢,在顶部变得更快.

为什么绝对命名视图？因为它允许使用z-indexing使列表保留在"项目详细信息"视图下方,所以当用户关闭/离开它时,您可以回滚动画,矩形将缩回到完全相同的尺寸和列表项的位置.最后,转换不透明度: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释放它,因为它远非完美.您不仅应该阻止列表滚动,还应该阻止向上和向下滑动事件.

它也很重要,只能第二次使用.但这个概念可能是这样的.