CODEWITHSUNDEEP
cssangularjscss-transitions
Frutis
Frutis

Reputation: 489

How to add smooth transition for Angular.js Show/Hide?

I want to make a smooth transition for hiding and displaying the div tag, but couldn't find a good example that I could use.
Edit: by smooth transition I mean that the div would collapse during 1-2 seconds and not immediately. Demo:https://jsfiddle.net/p21jLfu4/

<div class="test" ng-show="IsVisible"></div>

Upvotes: 2

Views: 2712

Answers (1)

Rahul Arora
Rahul Arora

Reputation: 4543

This will work - I have used only ng-class to override height, Initially the height is 0px and is changed to 50px on click (toggle). Due to css transitions this thing works smoothly

<body>
  <script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function($scope) {
      //This will hide the DIV by default.
      $scope.IsVisible = false;
      $scope.ShowHide = function() {
        //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisible = !$scope.IsVisible;
      }
    });

  </script>
  <div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="SHOW/HIDE" ng-click="ShowHide()" />
    <br />
    <br />
    <div class="test" ng-class="{'divOpen': IsVisible}"></div>
  </div>
</body>

And in your css

.test {
  background: red;
  width: 200px;
  height: 0px;
  margin-top: -18px;
    -webkit-transition: height 2s;-moz-transition: height 2s ease-in-out;-ms-transition: height 2s ease-in-out;
-o-transition: height 2s ease-in-out;transition: height 2s;
}


.divOpen{
  height: 50px;
}

Upvotes: 4

Related Questions