Menu
I am trying to use ngAnimate to collapse in / out boxes. I did something like that and it works, but how do I get rid of the height property? Boxing can be used to extend (the text in it), but then the text will be coming out over the edge.
.myTest {
transition: all linear 0.5s;
height: 400px; /* I want to get rid this */
}
.ng-hide {
height: 0;
}
<div class="content myTest" ng-show="show">
<div class="row">
<div class="col-md-15">
<div class="text1">{{text1}}</div>
<div class="analytic">{{analytic}}</div>
<div class="text2">{{text2}}</div>
</div>
</div>
<div class="row">
<div class="col-md-15">
<div class="label">{{'label'|translate}}</div>
<div class="text3">{{text3}}</div>
</div>
</div>
</div>
550
Please Refer This Code
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
This has also been answered with many approaches in this question. There is no easy way to make this animation work perfectly every time without using javascript to measure the height of the inner contents or using a css scale (see the link).
Also, to ensure that the text is hidden when the container is collapsed, be sure to use overflow: hidden; in the class
A basic example using max-height rather than height to getter a tighter box around the data:
.myTest {
transition: all linear 0.5s;
max-height: 400px; /* Set to something larger is expected */
overflow: hidden;
}
.ng-hide {
max-height: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
