Question

我非常希望在我的角应用中集成基本用法模板 来自Angular Materials。

单击＆lt;＆gt; 时，我非常喜欢过渡效果。

我已经在他们的网站上搜索过该指令，但没有找到它。我设法找到的最接近的是Toolbar，但它的上角没有圆角的方式略有不同。此外，使用简单的ng-show，不会提供过渡。

有关如何实现这一目标的任何建议？

Answer 1

你可以用angular animations做到这一点，这只是一些带过渡的简单CSS。而且你与md-toolbar走在了正确的轨道上。演示使用它，你只需要设置一些CSS来围绕顶角。

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

Answer 2

您需要在slideToggle()中实现类似于jquery方法的内容。 Angular Slideables指令提供此功能。

除了md-toolbar指令外，直角是一种自定义样式。

Answer 3

事实证明，这是我设法找到最适合我需要的东西。

<!DOCTYPE html>
<html ng-app="ui">

<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="angular-animate@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="ui-bootstrap@0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
  <script data-require="ui-bootstrap-tpls-0.11.2.min.js@0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="controller as model">
    <uib-accordion close-others="model.oneAtATime">
      <uib-accordion-group heading="Custom template">
        <uib-accordion-heading>
          I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </uib-accordion-heading>
        <h1>Some Content</h1>
      </uib-accordion-group>
    </uib-accordion>
  </div>
</body>

</html>

{{1}}

其他提供开箱即用功能的解决方案非常受欢迎。

角度材料：基本用法模板

3 个答案: