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-showしたがって、 onの値を配置する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

angular JSのngShowディレクティブと組み合わせてCSS translate プロパティを使用できます。Angular はアニメーション効果を提供しませんが、Angular UI はそれを提供する場合があります。

于 2013-01-29T22:52:26.583 に答える