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上使用动画但是，当<i>成为＆{39}时，我想以不同的方式设置<span>元素和form-error元素的动画。。活性＆＃39;

现在，它立即动画了两个动画。

知道如何逐个制作动画吗？

Answer 1

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

.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？

1 个答案: