Angular show / hide with animation

Question

I'm trying to fade out a div and then show a new div but my code is broken. How can I fix? The fade-out animation works but the showManagement div does not appear.

HTML

<div ng-hide="hidden" ng-class="{fade: startFade}">
    <p>this is start content that should be faded</p>
</div>
<div class="showManagement" ng-show="showManagement">
    <p>this is the new content to be displayed once the fade is complete.</p>
</div>

JS

$scope.getManagement = function () {

    $scope.startFade = true;

    $timeout(function(){
        $scope.hidden = true;
    }, 2000);

    // this is the part that doesn't display
    $scope.showManagement = true;
 };

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

Answer 1

Since you didn't provide your controller and didn't show where you call the function getManagement() , I'll assume that you want all the fade-out fade-in events show within 2 seconds after angular loaded.

Here's an example on CodePen for how you can achieve your goal with your approach.

And here's the code:

HTML

<body ng-app="myApp">
  <div class="wrapper" ng-controller="MainCtrl">
    <div ng-class="{fade: startFade}">
        <p>this is start content that should be faded</p>
    </div>
    <div ng-class="{hideManagement: hideManagement, showManagement: showManagement}">
        <p>this is the new content to be displayed once the fade is complete.</p>
    </div>
  </div>
</body>

CSS

.fade{
    transition: opacity 3s;
    opacity: 0;
}

.hideManagement {
  opacity: 0;
}

.showManagement {
    transition: opacity 3s 3s;
    opacity: 1;
}

JS

angular
  .module('myApp', [])
  .controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.startFade = false;
    $scope.showManagement = false;
    $scope.hideManagement = true;

    $timeout(function(){
      $scope.startFade = true;
      $scope.showManagement = true;
      $scope.hideManagement = false;
    }, 2000);
  }]);

A few things you have to keep in mind:

You cannot animate your display: none; and display: block; with CSS3 transition. This is the reason why ng-hide in your .showManagement is not showing with transition effect. You should keep using opacity to achieve this goal, just like you did in ng-class="{fade: startFade}"
Initialize your state at the beginning of your Angular controller. In the example your provide, it's a little bit confusing how you set your $scope.showManagement , $scope.hidden , and $scope.startFade . Once you setup your initial state like the example I provide, it would be more clear that what kind of states change you should make in the function, whether it's in a $timeout callback or some other functions trigger by other events
To make .showManagement fade-in right after the first <div> finishing it's fade-out effect, you may set the delay in css transition.

If you are doing more complex animation, you should try leveraging on ngAnimate service. With ngAnimate, you can get rid of those ng-class in this example, and simply binding your animation rules with .ng-enter , .ng-enter-active , .ng-hide , .ng-hide-active , which are automatically bind to your elements by Angular. Here's the official documentation for ngAnimate .

Angular show / hide with animation

Question

1 answers

solution1
1 ACCPTED 2015-04-21 19:02:25

HTML

CSS

JS

Angular show / hide with animation

Question

1 answers

solution1 1 ACCPTED 2015-04-21 19:02:25

HTML

CSS

JS

solution1
1 ACCPTED 2015-04-21 19:02:25