ngAnimateモジュールを使ったアニメーション利用例

AngularJSのアニメーションモジュール「ngAnimate」を利用して作成したものをいくつかまとめておきます。

ngAnimateモジュールを導入すると、ng-ifによって要素が追加・削除されるタイミングで、ng-enter、ng-enter-active、ng-leave、ng-leave-active といったクラスが ng-if を設定した要素に付加されます。また、配列データの順番を入れ替えると、ng-move、ng-move-active といったクラスが、入れ替えるデータの最終的に順番が若くなる方に付加されます。この付加されるクラスにアニメーションを設定することで、以下のような表示が可能です。

前へ次へ

◆HTML

<div class="image-area">
    <div class="image-wrapper" ng-repeat="image in imageList" ng-if="$index == imageDisplayedIndex">
        <div class="image-item" style="background-image: url('{{image}}');"></div>
    </div>
</div>

◆JavaScript

var myApp = angular.module('exampleApp', ['ngAnimate']);
myApp.controller('ExampleCtrl', function($scope) {
    $scope.imageDisplayedIndex = 0;
    $scope.imageList = ["fuji.jpg", "hawai.jpg", "tarumae.jpg", "yaba.jpg", "yuhu.jpg"];

    $scope.prevImage = function(){
        $scope.imageDisplayedIndex--;
        if($scope.imageDisplayedIndex < 0){
            $scope.imageDisplayedIndex = $scope.imageList.length - 1;
        }
    };
    $scope.nextImage = function(){
        $scope.imageDisplayedIndex++;
        if($scope.imageDisplayedIndex >= $scope.imageList.length){
            $scope.imageDisplayedIndex = 0;
        }
    };
});

◆CSS

/* 表示されるイメージの挙動 */
.image-area .image-wrapper.ng-enter{
    width: 0;
    height: 0;
    transition: 0.5s ease-out all;
}
.image-area .image-wrapper.ng-enter.ng-enter-active{
    width: 100%;
    height: 100%;
}

/* 前回表示したイメージの削除時の挙動 */
.image-area .image-wrapper.ng-leave{
    opacity: 1.0;
    z-index: 1;
    transition: 1.0s ease-out all;
}
.image-area .image-wrapper.ng-leave.ng-leave-active{
    opacity: 0;
}

No

イメージ

ファイル名

操作

{{$index + 1}}

{{image}}

上へ 下へ

◆HTML

<div class="item-list">
    <div class="item-row item-header">
        <div class="item-no">No</div>
        <div class="item-image">イメージ</div>
        <div class="item-file">ファイル名</div>
        <div class="item-command">操作</div>
    </div>
    <div class="item-row" ng-repeat="image in imageList">
        <div class="item-no">{{$index + 1}}</div>
        <div class="item-image"><img ng-src="{{image}}"/></div>
        <div class="item-file">{{image}}</div>
        <div class="item-command">
            <button ng-click="moveUpItem($index)" ng-disabled="$index == 0">上へ</button>
            <button ng-click="moveDownItem($index)" ng-disabled="$index == imageList.length - 1">下へ</button>
        </div>
    </div>
</div>

◆JavaScript

var myApp = angular.module('exampleApp', ['ngAnimate']);
myApp.controller('ExampleCtrl', function($scope) {
    $scope.imageList = ["fuji.jpg", "hawai.jpg", "tarumae.jpg", "yaba.jpg", "yuhu.jpg"];

    $scope.moveUpItem = function(index){
        $scope.imageList.splice(index - 1, 2, $scope.imageList[index], $scope.imageList[index - 1]);
    };

    $scope.moveDownItem = function(index){
        $scope.imageList.splice(index, 2, $scope.imageList[index + 1], $scope.imageList[index]);
    };
});

◆CSS

/* 最終的に上になる要素の始点 */
.item-list .item-row.ng-move {
    transition:all linear 0.5s;
    position: relative;
    top: 50px;
}

/* 最終的に上になる要素の終点 */
.item-list .item-row.ng-move.ng-move-active {
    position: relative;
    top: 0;
}

/* 最終的に下になる要素の始点 */
.item-list .item-row.ng-move + div {
    transition:all linear 0.5s;
    position: relative;
    top: -50px;
}

/* 最終的に下になる要素の終点 */
.item-list .item-row.ng-move.ng-move-active + div {
    position: relative;
    top: 0;
}