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

我试图用AngularJS创建一个简单的内容滑块。我将学习本教程：

然而，内容是“跳跃”。下一张幻灯片出现在当前幻灯片的下方；当另一个正在淡出时，它不会出现在其适当的位置。下面是一幅图片，希望能澄清这个问题：

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>

请注意，如果我删除CSS，它就可以正常工作。容器按其应有的方式隐藏和显示。但是，我希望能够应用一些动画。我对CSS动画和AngularJS都是新手；如果这是一个重复或明显的问题，我深表歉意。

请检查此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>

1

我希望我能帮助你

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

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