1

私はこのようなdivを持っています:

<div class="row">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>

私は angularjs でアラートを作成します (そしてブートストラップを使用しています)。これはうまく機能しますが、視覚効果はちょっとクールではありません。アラートが div に追加されると、新しいアラートのためのスペースを確保するために、すべてのページ コンテンツが乱暴に押し下げられます。

少なくとも滑らかになるように動きをアニメートしたいと思います。しかし、私はjQueryを使いたくありません。CSS3 トランジションで遊んでみましたが、スムーズに動作しないようです。

トリガーがdivの高さの変更である場合、これを行うことはできますか? どのように？

4

2 に答える 2

0

わかりましたので、私は自分の質問に答えるのは好きではありませんが、これはそれを行う方法のようです...

新しい ngAnimate モジュールとともに AngularJS 1.2 を使用しました。angular-animate.js を追加し、animate モジュールを参照する必要があるため、最後に私のモジュールは次のようになります。

var app = angular.module('tracker', ['$strap.directives', 'ui.bootstrap', 'ngRoute', 'ngAnimate']);

その後は、非常にシンプルで非常に CSS3 のアニメーションです。私のアラート行は class で終わりましたrepeat-item:

<alert class="repeat-item" type="alert.type" data-ng-repeat="alert in alerts" close="closeAlert($index)">{{alert.msg}}</alert>

そして、いくつかの CSS を追加して、angularjs トリガーを使用してそのクラスをターゲットにしました。

.repeat-item.ng-enter,
.repeat-item.ng-leave {
    -webkit-transition: 0.2s linear all;
    -moz-transition: 0.2s linear all;
    -o-transition: 0.2s linear all;
    transition: 0.2s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
    opacity: 0;
}

.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
    opacity: 1;
}

そしてvoila素敵なフェードインとフェードアウトのアニメーション。

このページでは、その方法を非常によく説明しています。素晴らしいリンクを提供してくれた Michael Benford に乾杯。

于 2013-09-05T22:37:30.873 に答える
0

リンク関数のディレクティブを使用して実行できます。jqueryコードの小さな部分については気にしないと思います

myModule.directive('animateRight', function () {
    var linker = function (scope, element, attrs) {
        var right = function() {

            $(this).animate({
                {"height": "800px"},
                "fast");
            })
        }

        element.on('click', right);
    };

     return {
    restrict:'A',
    link:linker
}
})


<div animate-right class="box"></div>
于 2013-09-05T18:58:50.827 に答える