Angular 1.3 css animation not working

Question

I am new to angular, I've pretty much copy pasted the example off the docs but I can't get it to work.
I've searched online but the examples I've come across are for older versions of angular...

Demo: Plunker link

html:

<body ng-controller="MainCtrl">
    <button ng-click="shown = true">Fade in</button>
    <button ng-click="shown = false">Fade out</button>
    <p ng-if="shown" class="fade-in-animation">Hello!</p>
</body>

js:

angular.module('plunker', []).controller('MainCtrl', function($scope) {
    $scope.shown = false
});

css:

.fade-in-animation.ng-enter, .fade-in-animation.ng-leave {
    -webkit-transition:2s linear all;
    transition:2s linear all;
}

.fade-in-animation.ng-enter {opacity: 0;}
.fade-in-animation.ng-enter.ng-enter-active {opacity: 1;}
.fade-in-animation.ng-leave {opacity: 1;} 
.fade-in-animation.ng-leave.ng-leave-active {opacity: 0;}

Answer 1

In addition to loading angular-animate.js you also need to add the ngAnimate module as a dependency.

In your case, instead of:

angular.module('plunker', [])

Do:

angular.module('plunker', ['ngAnimate'])

Demo: http://plnkr.co/edit/vkiuJDW9IHFianW1ZbbK?p=preview

Angular 1.3 css animation not working

Question

1 answers

solution1
0 ACCPTED 2015-01-07 13:09:10

Angular 1.3 css animation not working

Question

1 answers

solution1 0 ACCPTED 2015-01-07 13:09:10

solution1
0 ACCPTED 2015-01-07 13:09:10