CSS透明度动画AngularJS [英] CSS Opacity animation in AngularJS
问题描述
我是新来的角，我尽量不依赖于jQuery的这个淡入动画我想要的。
I'm new to Angular and I'm trying not to depend on jQuery for this fadeIn animation I want.
我试过NG-动画和.fade输入+ .fade-enter.fade进入活跃，但我越来越行不通。
I've tried ng-animate and .fade-enter + .fade-enter.fade-enter-active, but I'm getting nowhere.
我的页脚的CSS是这样的：
my footer CSS looks like this:
footer {
opacity: 0.3;
text-align: center;
}
和我想制作动画，这样不透明变为1比2秒。
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>
我怎么会做这个动画与角和CSS和jQuery的没有？
How would I do this animation with Angular and CSS and without jQuery?
推荐答案
下面是如何做到在角1.1.5 /出动画淡入淡出的例子：
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;
}
这里。
这博客帖子对角中的动画良好的信息1.1.5。我建议采取一看全新的动画系统的释放角1.2 RC1。
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.
这篇关于CSS透明度动画AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
