I'm new to Angular and I'm trying not to depend on jQuery for this fadeIn animation I want.
I've tried ng-animate and .fade-enter + .fade-enter.fade-enter-active, but I'm getting nowhere.
my footer CSS looks like this:
footer {
opacity: 0.3;
text-align: center;
}
And I'm trying to animate it such that opacity goes to 1 in 2 seconds.
This is the version of Angular I am running:
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
How would I do this animation with Angular and CSS and without jQuery?
Here's an example of how to do a fade in/out animation in Angular 1.1.5:
HTML
<body ng-init="visible = true">
<button ng-click="visible = !visible">Show/Hide</button>
<p ng-show="visible" ng-animate="'fade'">Hello {{name}}!</p>
</body>
CSS
.fade-hide, .fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
opacity:1;
}
.fade-hide.fade-hide-active {
opacity:0;
}
.fade-show {
opacity:0;
}
.fade-show.fade-show-active {
opacity:1;
}
Plunker here.
This blog post has good information on animations in Angular 1.1.5. And I suggest taking a look at the new animation system released in Angular 1.2 RC1.
All you need about animation can be found on their documentation
HTML
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">Visible...</div>
</div>
CSS
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}
source: https://docs.angularjs.org/guide/animations
