animation css 透明度逐渐_CSS透明度动画AngularJS

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:

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

Show/Hide

Hello {{name}}!

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.