Angular - ng-hide animation doesn't fully hide - angularjs

Question

The repo is here: https://github.com/sjzerneri/mad-lib-project/ and the live preview is here: http://sjzerneri.github.io/mad-lib-project/
I have an ng-hide in my html that operates correctly before I start trying to adjust the css to animate it.
When I try to animate it with ng-hide-add and ng-hide-remove, the section fades out, and then promptly reappears instead of hiding. Why doesn't the section stay hidden?
Here's my HTML for the section:
<section class="word-inputs" ng-hide="hideForm && myForm.$valid">
<h3> Provide The Following Words:</h3>
<div class="all-words">
<form name="myForm" ng-submit="submitted=true;submit()">
<div class="word-selection">
<input type="text" ng-model="name" placeholder="name" required>
<input type="text" ng-model="jobtitle" placeholder="job title" required>
<input type="text" ng-model="tedioustask" placeholder="tedious task" required>
</div>
<div class="word-selection">
<input type="text" ng-model="dirtytask" placeholder="dirty task" required>
<input type="text" ng-model="celebrity" placeholder="celebrity" required>
<input type="text" ng-model="uselessskill" placeholder="useless skill" required>
</div>
<div class="word-selection">
<input type="text" ng-model="obnoxiousceleb" placeholder="obnoxious celeb" required>
<input type="number" ng-model="hugenumber" placeholder="huge number" required>
<input type="text" ng-model="adjective" placeholder="adjective" required>
</div>
<div class="hor-line"> </div>
<div class="submission">
<button type="submit">Generate Mad Lib</button>
</div>
</form>
</div>
</section>
Here's my css:
.word-inputs {
padding-top: 2rem;
margin: 0 auto;
width: 90%;
text-align: center;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block!important;
}
.word-inputs.ng-hide-add.ng-hide-add-active,
.word-inputs.ng-hide-remove {
opacity: 0;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}

Answer 1

Add an extra div for your animation class
like
<section ng-hide="hideForm && myForm.$valid">
<div class="word-inputs" >
<h3> Provide The Following Words:</h3>
.....
</div>
</section>