3

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>

ng-swipe-leftにバインドするを追加したいと思いprevious()ます。私はこれを自分でコーディングでき、機能的には問題なく動作します。しかし、次のアニメーションに基づいて別のアニメーションを起動するにはどうすればよいです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;
}
4

1 に答える 1