我正在使用AngularJS 1.2版本。我已经成功使用了:
<script src="js/angular-touch.js"></script>
<script src="js/angular-animate.min.js">
为了让用户能够通过向右滑动来浏览div,这个功能已经实现。这个功能表现良好。
主页面
<div ng-view class="my-slide-animation" >
</div>
部分
<div ng-swipe-right="next()">
</div>
现在,我想添加一个绑定到previous()
的ng-swipe-left
。虽然我自己可以编写代码,它能够正常工作,但是如果我想根据next()
或previous()
触发不同的动画,该怎么做呢?也就是说,当进行下一步时,我希望它能使用下面的CSS动画,但是当使用previous()
时,我希望反向发生。
CSS 动画如下:
.my-slide-animation.ng-enter, .my-slide-animation.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
position:absolute;
top:0;
left:0;
right:0;
}
.my-slide-animation.ng-enter {
z-index:100;
top:600px;
opacity:0;
}
.my-slide-animation.ng-enter.ng-enter-active {
top:0;
opacity:1;
}
.my-slide-animation.ng-leave {
z-index:101;
top:0;
opacity:1;
}
.my-slide-animation.ng-leave.ng-leave-active {
top:-600px;
opacity:0;
}