我目前正在使用 AngularJS、ngAnimate、Angular-Material 和 UI-Router 开发一个移动 Web 应用程序。我正在遵循 UI/UX 部分的 Google Material Design 规范。
我想以“Angular 方式”为状态更改设置动画，尤其是 'Parent to child' animation
我不知道如何实现这种“提升和展开”动画。
感谢您的帮助！
【问题讨论】：
标签： angularjs angular-ui-router css-transitions ng-animate angular-material
我猜你必须自己做。
Angular-material 不是复制 Material Design 动画准则的魔杖。 Material Design 指南只是简单的指南，而且对于 Google 的 Android 应用（无论是否在内部）来说，都足够宽松以致于被黑客攻击或严格遵守。
我的感觉是 Angular Material 团队已经像疯子一样努力将这个很棒的工具带到 1.0，并将利用new routing system in Angular 2 提供一些动画，比如你希望开箱即用的动画。
但至少目前是the bleeding edge of the bleeding edge。
好消息似乎是路线将有自己的视口和同级视口。
AngularJS 在某种程度上开始接受 Polymer 的 Web 组件概念。 滚动到“向我展示魔法！” on this page 和 check these demos。 Polymer 的生态系统提供了大量的already-made components to build your app with。它很大，让你想知道为什么 Polymer 没有得到the same momentum as AngularJS。但我离题了...
创建一个自定义函数，该函数会在被单击/点击的列表元素上触发，以放置在您的控制器（或指令）中。
一旦用户点击/点击列表元素，它就会触发该功能（控制台测试）。
函数应该：
为什么是绝对命名的视图？因为它允许使用 z-indexing 使列表保持在“项目详细信息”视图下方，所以当用户关闭/离开它时，您可以回滚动画，并且矩形将收缩回精确的尺寸和列表项的位置。最后，转换 opacity:0 并离开路线。
这是拉伸/滚动离子项目的技术的粗略模型。它需要检测项目的 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 将其释放，因此它远非完美。您不仅应该阻止列表滚动，还应该阻止上下滑动事件。
它也初始化不好，只能第二次工作。但这个概念可能是这样的。
【讨论】：