Question

我正在学习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>

Answer 1

在ng-class代码上使用<body>，这是ngClass的文档

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

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

当您点击按钮on时，变量将在true＆amp;之间切换。 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

AngularJS CSS动画 - 同时动画两个元素

1 个答案: