javascript - 来自 Controller 的 Angular 动画

Question

您好，我正在尝试通过我的 Controller 为我的对象设置动画。基本上，html 包含一个图像，当我从 Controller 更改它时，我希望能够将它从屏幕上移到左侧或右侧。我有一些基本的东西，但它们似乎不起作用。

CSS

.img-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 350px;
}
.img-slide.ng-enter,
.img-slide.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.img-slide.ng-enter {
    left: 100%;
}
.img-slide.ng-enter-active {
    left: 0;
}
.img-slide.ng-leave {
    left: 0;
}
.img-slide.ng-leave-active {
    left: -100%;
}

HTML

<div class='row images'>
     <div class='col img-slide'>
         <img src="{{imgSlide}}"/>
     </div>
</div>

JS

$scope.changeImg = function () {
    //This is where the scope var is update
    $scope.imgSlide = newImgSlide;

    //Code to add my animation here
};

Answer 1

恶魔蠕虫， 我对你的代码做了一些调整。有几个问题(一个是找不到您的第二个图像路径。)

首先，我添加了一个新的范围变量 currentImage。然后，我将图像放在一个数组中。接下来，我将您的 imgSlide 变量更新为一个对象，如下所示:

$scope.imgSlide = {
    image: $scope.imagesArray[$scope.currentImage].img
}

然后，我编辑了您的 HTML 以使用 ng-model，如下所示:

<div class='col img-slide' ng-model="imgSlide" >
    <img ng-src="{{imgSlide.image}}"/>
</div>

最后，我编辑了您的 changeImg 函数，使其更新 $scope.currentImage 的值，并将 imgSlide 对象的 img 属性替换为数组中位于 $scope.currentImage 索引处的元素。

希望这对您有所帮助。

这是一个 fiddle :http://jsfiddle.net/bjDesign/ntdt8jsa/11/