我是 Angular 新手，我试图不依赖 jQuery 来实现我想要的淡入动画。
我尝试过 ng-animate 和 .fade-enter + .fade-enter.fade-enter-active，但毫无进展。
我的页脚 CSS 如下所示:
footer {
opacity: 0.3;
text-align: center;
}
我正在尝试对其进行动画处理，使不透明度在 2 秒内变为 1。
这是我正在运行的 Angular 版本:
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbbab5bcaeb7baa9f5b1a89beaf5eaf5ee" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
如何使用 Angular 和 CSS 而不使用 jQuery 来制作这个动画？
最佳答案
以下是如何在 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;
}
笨蛋here .
这个blog post有关 Angular 1.1.5 中动画的详细信息。我建议看一下 new animation system在 Angular 1.2 RC1 中发布。
关于javascript - AngularJS 中的 CSS 不透明度动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18422326/