ng-enter

by Martin Večeřa

HTML

<div ng-app="test">
    <div ng-init="yourName= 'delete this'">
        <form name="myForm">
            <label>Name:</label>
            <input required type="text" name="name" ng-model="yourName" placeholder="Enter a name here">
            <div ng-messages="myForm.name.$error">
                <div ng-message="required">required ngMessage</div>
            </div>
            <hr>
            <p class="test" ng-if="myForm.name.$error.required">required ngIf</p>
        </form>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
 <style> .test.ng-enter {
    transition: all 2s;
    opacity: 0;
}
.test.ng-enter-active {
    opacity: 1;
}
[ng-message].ng-enter {
    transition: all 2s;
    opacity: 0;
}
[ng-message].ng-enter-active {
    opacity: 1;
}

JavaScript

angular.module('test', ['ngAnimate', 'ngMessages']);