2

AngularJS フォームがあり、エラー メッセージにアニメーションを使用したいと考えています。これが私が今持っている現在のコードです：

<input type="text" name="name" ng-model="name" required>

<div class="form-error-cont" ng-messages="form.name.$dirty && form.name.$error">
    <p ng-message="required" class="form-err">
        <i class="icon-remove"></i>
        <span class="text">Your name is required.</span>
    </p>
</div>

アニメーションを使用することができましたが、要素が「アクティブ」になったときに、要素と要素を別の方法でform-errアニメーション化したいと考えています。<i><span>form-error

現在、両方を同時にアニメーション化しています。

それらを1つずつアニメーション化する方法はありますか？

4

1 に答える 1

2

angular でイベントをキャプチャして特定のアニメーションを作成するクラスを追加できます。これに似たもの。

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
   transition:all linear 0.5s;
   backface-visibility: hidden;

}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
    opacity:0;
    max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
    opacity:1;
    max-height:30px;
}

そしてあなたのhtml

<div class="form-error-cont" ng-messages="form.name.$dirty && form.name.$error">
    <p ng-message="required" class="form-err animate-repeat">
        <i class="icon-remove"></i>
        <span class="text">Your name is required.</span>
    </p>
</div>

ここでイベントとその処理方法を確認できますngAnimate

于 2016-06-25T15:10:08.550 に答える