Frutis Frutis - 1 year ago 105
CSS Question

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.

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

Answer Source

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

  <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;

  <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>

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;

  height: 50px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download