带有ngAnimate的Angularjs当只有一个图像具有活动类时，将显示所有图像

Question

我一直在试验ngAnimate，并创建了一个网站，它有一个类似于电话猫教程的动画。网站显示为here。它的工作方式是有5个动物的缩略图。在缩略图下面，一张图片应该显示哪张是第一张图片。当单击任何其他缩略图时，新图像会滑入并淡入，而旧图像则滑上并淡出。然而，当网站第一次加载时，所有的图像都会显示出来。我不明白为什么这是因为只有一个图像有活动的类，而且应该是唯一显示的。然而，如果在网站上点击所有其他图像，它就会正常工作，并且一次只显示一张图像。

下面是代码。

Index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Images Project</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="angular-animate.js"></script>
    <script src="angular-resource.js"></script>
    <script src="angular-route.js"></script>
    <script src="myapp.js"></script>
    <script src= "controllers.js"></script>
</head>
<body>
    <div class="view-container"
    <div ng-view class="view-frame"></div>
    </body>


</body>
</html> 

display-images.html

<div class="container">
        <div class="row">
            <div ng-repeat="image in images" class="col-sm-4 col-md-2">
                <div href="#" class="thumbnail">
                    <img ng-src="{{ image.image }}"
                        ng-click="setImage(image.image)"
                         alt="{{ image.alt }}">
                </div>
            </div>
        </div>
        <hr>
            <div ng-repeat="image in images">
                <img ng-src="{{ image.image }}"
                        class="photos"
                        ng-class="{active: mainImageUrl==image.image}">
            </div>
    </div> <!-- /container -->

myApp.js

angular.module('myApp', ['ngAnimate', 'ngRoute', 'displayControllers'])
.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'display-images.html',
            controller: 'DisplayImagesCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
    }])
.animation('.photos', function() {
    var animateUp = function(element, className, done) {
        if(className != 'active') {
            return;
        }
        element.css({
            position: 'absolute',
            top: 1500,
            display: 'block'
        });

        jQuery(element).animate({
            top: 300
        }, done);

        return function(cancel) {
            if (cancel) {
                element.stop();
            }
        };
    }

    var animateDown = function(element, className, done) {
        if(className != 'active') {
            return;
        }
        element.css({
            position: 'absolute',
            top: 300
        });

        jQuery(element).animate({
            top: -1500
        }, done);

        return function(cancel) {
            if(cancel) {
                element.stop();
            }
        };
    }

    return {
        addClass: animateUp,
        removeClass: animateDown
    };
})
.factory('DisplayImagesService',
    function() {
        return {
            imageObj: function() {
                images = [
                    { image: 'images/animal1.jpg', alt: 'Picture of two sheep'},
                    { image: 'images/animal2.jpg', alt: 'Picture of a dog'},
                    { image: 'images/animal3.jpg', alt: 'Picture of a gorilla'},
                    { image: 'images/animal4.jpg', alt: 'Picture of a bull'},
                    { image: 'images/animal5.jpg', alt: 'Picture of a horse'}
                ];
                return images;
            }
        }
});

controller.js

var displayControllers = angular.module('displayControllers', []);
displayControllers.controller('DisplayImagesCtrl', ['$scope','DisplayImagesService',
 function($scope, DisplayImagesService) {
    $scope.images = DisplayImagesService.imageObj();

    $scope.setImage = function(imageUrl) {
        $scope.mainImageUrl = imageUrl;
    }

    $scope.mainImageUrl = 'images/animal1.jpg';
    }]);

Answer 1

我找不到一种方法来解决这个问题，似乎在电话猫教程中，他们用css以如下方式补偿了这个问题：

他们限制了展示区的高度。

将溢出设置为隐藏。

图像的背景颜色为白色，与网页的背景颜色相同。

我发现，如果我使用gimp将图像放在白色背景上，并限制显示区域的高度，并将overflow设置为hidden，我可以得到看起来合理的结果。