Question

抱歉没有太多代码可以提供。但我花了好几个小时试图弄清楚如何做一些似乎应该在角度上非常简单的事情......这告诉我，我可能遗漏了一些非常基本的东西。

我有一个img元素，其内容我根据$ interval计时器进行更改。当计时器触发时，活动图像被更改，img按预期更新。

但我想要做的是让新图像淡入。现在它突然出现了。

非常感谢任何帮助或潜在客户。

这是html，例如它。它显示多个图像中的一个，以及与图像相关的可选标题。

<div ng-controller="carouselCtrl">
    <div class="row">
        <img class="col-md-6" src="{{model.activeSlide.url}}" />
    </div>
    <div class="row">
        <div class="col-md-6 img-caption" ng-bind-html="model.activeSlide.caption"></div>
    </div>
</div>

这是控制器：

var app = angular.module( "homeApp", ["ui.bootstrap", "ngAnimate", "ngSanitize"] );

app.controller( 'carouselCtrl', function( $scope, $interval ) {
    $scope.model = @Html.ToJavascript( Model );

    function rndImageIdx() {
        return Math.floor((Math.random() * $scope.model.slides.length));
    };

    $scope.model.activeSlide = $scope.model.slides[rndImageIdx()];

    var _interval = $interval( function() {
        $scope.model.activeSlide = $scope.model.slides[rndImageIdx()];
    }, $scope.model.interval);
} );

@ Html.ToJavascript（）只是使用来自创建页面的ASP.NET MVC操作生成的模型的值填充javascript对象。这些值包含图像文件的URL以及每个值的可选标题。

AngularJS：src更改时淡入/淡出img

0 个答案: