angularjs - 有 Angular Material : Basic Usage template

Question

我非常想在我的 Angular 应用程序中集成基本使用模板 来自Angular Materials 。

我真的很喜欢点击<>时的过渡效果。

我已经在他们的网站上搜索了该指令，但没有找到。我设法找到的最接近的是Toolbar ，但略有不同，上 Angular 不是圆 Angular 的。另外，使用简单的 ng-show 将不会提供该转换。

关于如何实现这一目标有什么建议吗？

Answer 1

您可以使用 angular animations 来做到这一点这只是一些带有过渡的简单 CSS。使用 md-toolbar 您就走在正确的轨道上。演示使用它，你只需要设置一些CSS来圆化顶 Angular 。

md-card md-toolbar {
  border-radius: 3px 3px 0 0;
}

现在在您想要切换的 md-toolbar 下方添加一些内容，并在其上使用 ng-show。

<div class="toggle-content" ng-show="open">
    The toggled content!
</div>

然后只需检查 ngShow有关如何使用 CSS 为其制作动画的文档。这里您想要设置动画的是 toogle-content 元素的高度。隐藏时，应用 height: 0，否则应用 height: 200px。

.toggle-content {
  height: 200px;
  background: red;
}

.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
  transition: height linear 0.5s;
}

.toggle-content.ng-hide {
  height: 0;
}

当然，您还需要工具栏中有一个用于切换内容的md-button。

<md-button ng-click="open = !open">
   Toggle
</md-button>

完整示例:http://codepen.io/kuhnroyal/pen/XXZPrE