3

我正在寻找最佳实践。

基本上我想要这样，如果你点击一个导航按钮，一个下拉菜单会向下滑动。

所以我有 ：

= link_to 'lez see the dropdown!', '#', 'ng-click' => 'open_dropdown()'

然后我在我的控制器里..

$scope.open_dropdown = ->

但是当我引用时this，它会拉出一个不允许您访问 DOM 的 Angular 对象。

我的 html

<div class="span1">
  <a class="icon settings" ng-click="open_dropdown()" href="#"></a>
  <div class="dropdown">
    Secret drop down stuffs!
  </div>
</div>

所以我想我已经解决了（有点）如何隐藏/显示您为ng-showon设置值的 Angular 样式.dropdown，但我不希望它显示。它必须滑动。

更重要的是，我想这样做，如果你点击其他地方，它就会消失。通常我可以在 jQuery 中用 6 行代码编写所有这些内容。但是 Angular 就像一个专有的封闭社区，所以我觉得我应该在这里利用手头的 koolaid。

问题

如何让下拉菜单以最 Angular 的方式向下滑动？

4

2 回答 2

2

CSS 是你的朋友：

<a ng-click="isOpen = !isOpen">open</a>
<div class="dropdown" ng-class="{ open: isOpen }">
    dropdown stuff
</div>


.dropdown {
    height: 0;
    transition: height 0.5s ease-in;
    /* vendor prefixes needed as well, see fiddle below */
}
.dropdown.open {
    height: 200px;
     /* I think "height: auto" should work, too */
}

如果您需要更多控制权，请考虑为此功能创建自己的指令。或者看看你是否可以在 Angular-UI 或其他地方找到一个。

更新

这是一个 JSFiddle。我也用它进行了测试height: auto;并且它有效，但是填充过渡没有正确动画，至少在 Chrome 中是这样。如果您可以使用指定的高度，它的动画效果会更好一些，但我意识到这并不总是理想的。我什至在过渡中加入了不透明度变化——没有它也能正常工作，但我个人喜欢它的外观。

（PS css3please.com是一个很好的来源，可以快速检查最常见的 css3 规则需要哪些浏览器前缀。这就是我所有转换规则的来源。）

于 2013-01-30T04:18:08.923 回答
1

您可以将 CSS translate 属性与 Angular JS 的 ngShow 指令结合使用。Angular 不提供动画效果，但 Angular UI 可能会为您提供。

于 2013-01-29T22:52:26.583 回答