无法让AnimationJS与AngularJS一起使用

Question

I'm trying to add ngAnimate to my code, but it doesn't work... And I'm totally lost. I would like the be between the 2 tabs in the footer. So the page starts on tab 1 and when you click on tab 2 I would like to show the content with an animation. Can anyone help me?? (I've already linked the script sources angularJs and the animation script at the top of my body

so the first two sentences are: 
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-animate.min.js"</script> 

but that's not the problem...)

html: 
<div id="container" ng-controller="todoCtrl">

<!-- de controller die de gemaakt todo's weergeeft in de eerste tab -->
<div ng-show="tab === 1">
        <ul class="dots">
            <li ng-repeat="todo in todos | orderBy:'date':true">
                <input type="checkbox" ng-model="todo.done" />
                <span> {{todo.date | date: 'fullDate'}} <br> </span>
                <span ng-class="{'done':todo.done}">{{todo.title}} <br><br></span>
            </li>
        </ul><br>
    <button ng-click="clearCompleted()">Clear post</button>
</div>
<!-- tweede controller die het getypte submit naar het overzicht -->
<div ng-show="tab === 2">
    <p> Write to me: </p>
    <form name="frm" ng-submit="addTodo()">
        <textarea rows="20" cols="100" placeholder="Today was..." name="newTodo" ng-model="newTodo" required > </textarea><br><br>
        <button class="btn" ng-disabled="frm.$invalid">Enter post</button>
    </form>
    <br>
</div>
</div>
<footer>
    <section ng-init="tab = 1">
        <ul class="nav">
            <li> <a href ng-click="tab = 1"> Summary </a> </li>
            <li> <a href ng-click="tab = 2"> Add Diary post </a> </li>
        </ul>
    </section> 
</footer>


Javascript: 
    <script> 
<!-- hier maak je de module aan voor angular en aciveer je in de html tag --> 
    angular.module('To_Do',['storageService', 'ngAnimate']).
    <!-- controleren of de todos kloppen -->
    controller('todoCtrl',['$scope','getLocalStorage', function($scope, getLocalStorage){
        $scope.todos = getLocalStorage.getTodos();
        [
        <!--        {'title' : 'Build a todo app', date: $scope.today, 'done':false} -->            
        ];
        <!-- nieuwe item toevoegen aan local storage -->

css: 
.ng-hide-remove { 
animation:0.5s lightSpeedOut ease;
}


@keyframes lightSpeedOut {
0% {
opacity: 1;
}

100% {
transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}

Answer 1

Here is your animation but without keyframes:

.page.ng-hide-add,
.page.ng-hide-remove
{
    -webkit-transition: 2000ms ease all;
    -moz-transition: 2000ms ease all;
    -ms-transition:2000ms ease all;
    -o-transition: 2000ms ease all;
    transition: 2000ms ease all;
}

.page.ng-hide-remove  {
    opacity:0
}

.page.ng-hide-remove.ng-hide-remove-active {
    opacity:1
}

.page.ng-hide-add  {
    left: 0;
    -webkit-transform:  skewX(0deg);
    -moz-transform:skewX(0deg);
    -o-transform : skewX(0deg);
    transform:  skewX(0deg);
    opacity:1
}

.page.ng-hide-add.ng-hide-add-active{
    left: 100%;
    -webkit-transform: skewX(30deg);
    -moz-transform:skewX(30deg);
    -o-transform : skewX(30deg);
    transform:  skewX(30deg);
    opacity:0
}


.page{
    position:absolute;
    left:0;
    width 100%;
}

.container{
    position: relative;
    height:40px;
}

i made you a jsfiddle http://jsfiddle.net/s2ygrya6/