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