AngularJS CSS 애니메이션 - 동시에 두 요소에 애니메이션 적용

AngularJs는 특히 각진 애니메이션을 배우고 있습니다. 나는 HTML에서 div 클래스 "my-first-animation"을 현재 전환시키는 토글을 가지고있다. 백그라운드로 동시에 전환을 적용하려면 어떻게해야합니까? div 클래스 "my-first-animation"이 나타나면 흰색 배경에서 배경색이 희미 해지기를 바랍니다. 미리 감사드립니다. 업데이트 : K.Torres 정말 잘 응답했습니다. 감사합니다. 그러나 나는 CSS에 다음과 같은 dark-bg 전환을 추가하려고 시도했지만 작동하지 않는 것 같습니다. 아무도 왜? 감사.AngularJS 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>

출처

2015-02-01 Ka Tech

<body> 태그에 사용 ng-class, 여기

유 클릭하면 ngClass

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

on 변수에 해당하는 경우이가 <body> 태그에 CSS 클래스 dark-bg를 추가합니다

에 대한 설명서입니다 on 버튼이 true &사이에서 토글됩니다.및 ng-class도 on 변수에 따라 달라집니다, 그래서 on이 false 다음 dark-bg CSS 클래스가 body에서 제거 할 경우 on 경우, truebody이 dark-bg CSS 클래스를 얻을 것입니다.

그럼 여기

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

을 추가 Plunker Demo

출처

2015-02-01 07:37:44

브릴리언트입니다 수 있습니다! 그 일은 대접이야. 고맙습니다. 추가 질문, 다음 CSS를 사용해 보았지만 작동하지 않았습니다 (원래 질문에서 업데이트 됨). 그것은 CSS의 ng-class에 대한 추가/제거 이벤트를 사용했습니다. 감사의 말을 다시 한번 감사드립니다. –

AngularJS CSS 애니메이션 - 동시에 두 요소에 애니메이션 적용

답변

관련 문제