Question

我正在尝试使用AngularJS创建一个简单的内容滑块。我正在学习本教程：https://www.sitepoint.com/creating-slide-show-plugin-angularjs/

然而，内容是＆＃34;跳跃＆＃34;。下一张幻灯片出现在当前幻灯片下方;当另一个消失时，它不会出现在适当的位置。这是一张希望澄清问题的图片：

HTML：

<div class="row" id='topSlider' ng-controller="SliderCtrl">
<h2 class="col-sm-12">Latest Stories</h2>
<div class="col-sm-12">

        <div class="slider" ng-repeat="story in stories" ng-show="story.visible">
            <a class="containerLink" href="View/ViewPost?postID={{story.StoryID}}">
                <div class="slide">
                    <h3 class="cursive">{{story.Title}}</h3>
                    <blockquote>{{story.StoryPara}}</blockquote>
                </div>
            </a>

    </div>


</div> 
<div class="row" id="arrows">
    <a href="#" ng-click="prev()"> <span class="glyphicon glyphicon-arrow-left"></span> </a>
    <a href="#" ng-click="next()"> <span class="glyphicon glyphicon-arrow-right"></span> </a>
</div>

控制器：

app.controller("SliderCtrl", ["$scope", "$http", "$timeout",  function ($scope, $http, $timeout) {
$scope.currentIndex = 0;

$http.post("/StoryWall/Home/GetLatestStories").then(function (response) {
    $scope.stories = response.data;
    $scope.stories[0].visible = true;
},
   function (response) {
       $scope.stories = response.data;   
   });


$scope.next = function () {
    $scope.currentIndex < $scope.stories.length - 1 ? $scope.currentIndex++ : $scope.currentIndex = 0;
};
$scope.prev = function () {
    $scope.currentIndex > 0 ? $scope.currentIndex-- : $scope.currentIndex = $scope.stories.length - 1;
};

$scope.$watch("currentIndex", function () {
    $scope.stories.forEach(function (story) {
        story.visible = false;
    });

    $scope.stories[$scope.currentIndex].visible = true;
});

var timer;
var sliderFunction = function () {
    timer = $timeout(function () {
        $scope.next();
        timer = $timeout(sliderFunction, 2000);
    }, 5000);
};
sliderFunction();

}]）;

和CSS：

.slider.ng-hide-add, .slider.ng-hide-remove {
      -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
  display:block!important;
  clear: none;
  float: none;
}



.slider.ng-hide-add.ng-hide-add-active,
.slider.ng-hide-remove {
    opacity: 0;
}

.slider.ng-hide-add,
.slider.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

请注意，如果我删除CSS它就可以了。容器隐藏和显示它们应该。但是，我希望能够应用一些动画。我是CSS动画和AngularJS的新手;如果这是一个减少或明显的问题，我道歉。

Answer 1

检查此css - ＆gt; https://daneden.github.io/animate.css/

这是我的剧本

var app=angular.module("app",[]);
app.controller("control",function($scope){
    $scope.tab="1";
});

你专注于ng-show方法例如

div中的所有滑块项目

<div ng-show="tab==1" class="slider-item animated slideInRight">
...............
</div>

，您的按钮必须

<button ng-mouseover="tab=1">1</button>

我希望我能帮到你

带有CSS3动画的AngularJS - 幻灯片问题

1 个答案: