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

现在它正在同时为它们两个设置动画。

知道如何为它们一一设置动画吗？

4

1 回答 1

2

您可以添加一个在角度上捕获事件并制作特定动画的类。类似的东西。

.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 回答