AngularJS CSS 动画 - 同时为两个元素设置动画答案

【问题标题】：AngularJS CSS animation - animate two elements same timeAngularJS CSS 动画 - 同时为两个元素设置动画
【发布时间】：2015-03-31 09:07:56
【问题描述】：

我正在专门学习 AngularJs 角度动画。我在 html 中有一个切换器，它当前转换 div 类“my-first-animation”。如何同时将过渡应用到背景？也就是说，当 div 类“my-first-animation”出现时，我希望身体的背景颜色从白色变为黑色。提前致谢。更新：K.Torres 的回答非常好。谢谢。但是，我尝试将以下 dark-bg 过渡添加到 CSS 中，但它似乎不起作用。任何一个不为什么？谢谢。

 <!DOCTYPE html>
 <html ng-app="app">
    <head>
        <title> Applying Animations</title>
        <script src="js/angular.js"></script>
        <script src="js/angular-animate.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('app', ['ngAnimate']);
            app.controller('homeCtrl', function ($scope){
                $scope.on = false;
            });
        </script>

        <style>
            /*start*/
            .my-first-animation.ng-enter{
                transition: .5s all;
                opacity: 0;
            }
                .my-first-animation.ng-enter-active{
                opacity: 1;
            }
            .my-first-animation.ng-leave{
                transition: .5s all;
                opacity: 1;
            }
                .my-first-animation.ng-leave-active{
                opacity: 0;
            }



     .dark-bg.ng-add {
        transition: .5s all;
       background:white;

     }
     .dark-bg.ng-add-active {
       background:gray;

     }
    .dark-bg.ng-remove {
       transition: .5s all;
       background:gray;

     }
     .dark-bg.ng-remove-active {
       background:white;

     }
        </style>
    </head>
    <body ng-controller="homeCtrl" ng-class="{ 'dark-bg': on }">
     <button ng-click="on=!on">Toggle Content</button>
     <div class="my-first-animation" ng-if="on">
            This content will fade in over a half second. 
     </div>
    </body>
    </html>

【问题讨论】：

标签： css angularjs

【解决方案1】：

在<body>标签上使用ng-class，这里是ngClass的文档

 <body ng-controller="MainCtrl" ng-class="{ 'dark-bg': on }" >

当on 变量为真时，这会将css 类dark-bg 添加到<body> 标记中，

当你点击按钮on 变量将在true 和false 之间切换，ng-class 也依赖于on 变量，所以如果on 是true body 将获取dark-bg css 类，如果on 是false，则dark-bg css 类将从body 中删除。

那么你可以添加

.dark-bg {
   background:gray;
   transition: .5s all;
 }

这里是Plunker Demo

【讨论】：

太棒了！这份工作是一种享受。非常感谢。进一步的问题，我尝试使用以下 CSS，但它不起作用（在原始问题中更新）。那就是我在 CSS 中使用了 ng-class 的添加/删除事件。感谢任何 cmets 再次感谢。