如何在 ngMessages 中使用 ngAnimate？

Question

我有一个 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 上使用动画，但是当 form-error 变成 'active.'

现在它同时为它们制作动画。

知道如何将它们一一制作成动画吗？

Answer 1

您可以添加一个 class 来捕获 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

如何在 ngMessages 中使用 ngAnimate？

How to use ngAnimate inside ngMessages?

angularjs

ng-animate

ng-messages