web-dev-qa-db-ja.com

AngularJS / UI Bootstrap-削除時にアラートをフェードアウトする

Angular with I Bootstrap を使用しています。ブロードキャストされたアラートをビューにバインドされたアラートの配列にプッシュするカスタムディレクティブを作成しました（=としてレンダリング） Bootstrapアラート）。特定のタイムアウト後、アラートはアレイから（したがってビューから）削除されます。コードは次のとおりです。

angular.module('myApp')
  .directive('alerts', function ($timeout) {
    return {
      restrict: 'E',
      templateUrl: 'views/alerts.html',
      scope: true, /*share scope between alerts directives*/
      link: function (scope) {
        scope.alerts = [];

        scope.$on('alert', function (event, alert) {
          var newLength = scope.alerts.Push({type: alert.type, msg: alert.message});

          $timeout(function() {
            scope.alerts.splice((newLength-1), 1);
          }, 3000);
        });
      }
    };
  });

アラートを削除する前に、アラートにフェードアウト（または実際には他のアニメーション）を追加できるかどうか疑問に思っていますか？ヘルプやヒントをいただければ幸いです。

javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
8
alexs333

In Angular> 1.1.5

Angularの組み込みアニメーション機能を使用できます。基本的には、繰り返される要素にdata-ng-animate="'<animation class>'"を追加するだけです。

この優れた投稿 animation-in-angularjs または@Nikosからの回答を参照してください。

In Angular 1.0.7（安定）

私が知る限り、アニメーションのサポートはありません。ただし、アニメーションは自分で作成できます。私はangularプロではないので、これは最善のアプローチではないかもしれません。

最初のタイムアウトがトリガーされる前に開始する「フェードアウトCSS3」アニメーションを追加する2番目の$timeoutを作成します。

  1. アラートを非表示にするためのCSS3アニメーションクラスを作成します（すでにブートストラップからのものである可能性があります）

    @keyframes fadeOut
{
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

@-webkit-keyframes fadeOut 
{
  from { opacity: 1.0 }
  to { opacity: 0.0 }
}

.fade-out
{ 
  animation: fadeOut 2s infinite;
  -webkit-animation: fadeOut 2s infinite;
}

  2. 2番目の$ timeoutを追加します。

    $timeout(function() { alert.expired = true; }, 2000);

  3. テンプレートに、ng-classを使用して条件付きクラスを追加します。

    <div ng-repeat="alert in alerts" ng-class="{'fade-out': alert.expired}">...</div>
10
Stefan

同様の設定があります。テンプレート：

_<div ng-controller="messages">
    <div ng-repeat="msg in messages"
        ng-animate="{enter: 'enter-slide', leave: 'leave-slide'}"
        alert type="msg.type" close="closeMsg($index)">{{msg.msg}}</div>
</div>
_

コントローラはシンプルで、次の関数とメッセージ配列が含まれています。

_function closeMsg(index) {
    $scope.messages[index].remove();
}
_

アニメーションの定義（ ng-animate -jQuery UIを使用しています）：

_module.animation("enter-slide", function () {
    return {
        setup: function (element) {
            element.hide();
        },
        start: function (element, done, memo) {
            try{
                element.slideDown(function () {
                    done();
                });
            }
            catch(ex){}
        }
    };
});

module.animation("leave-slide", function () {
    return {
        start: function (element, done, memo) {
            element.slideUp(function () {
                done();
            });
        }
    };
});
_

もちろん、slideUp/Down()を目的の効果に置き換えます。

2
Nikos Paraskevopoulos