8

UI Bootstrapで Angular を使用しています。ブロードキャストされたアラートをビューにバインドされたアラートの配列にプッシュするカスタム ディレクティブを作成しました (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);
        });
      }
    };
  });

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

4

2 に答える 2

10

Angular > 1.1.5

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

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

Angular 1.0.7 (安定)

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

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

  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>
于 2013-09-17T09:45:55.697 に答える
2

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

<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()、目的の効果に置き換えます。

于 2013-09-17T09:26:01.533 に答える