I have an angularjs app, and I want to add fade in effects to the content upon getting data, and if the data is bigger than the min-height of an outer div it should slowly and smoothly expand the outer div
I made a Fiddle that mimics it getting data, and once done it displays the content.
JSFiddle Demo
I tried to do some of the answers from an old question to my problem, but I keep getting confused.
In the demo, when you click click to add it has a $timeout after the timeout it loads records with data and it displays the data in a flash and the outer div card expands quickly to aid the inner data.
HTML Code:
<body ng-app="myapp">
<div class="row">
<div class="col s12 m6" ng-controller="controller1">
<div class="card fill1">
<div class="card-content">
<span class="card-title">{{title}}</span>
<div id="settings-controller2" parent="tippy" settings></div>
<button ng-click="add()">
click to add
</button>
<br/>
<br/>
<div class="filler">
<div ng-show="loader" class="preloader-wrapper big active center-align">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<table ng-show="display" border="1">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
AngularJS:
var myapp = angular.module('myapp', [])
.controller('controller1', function($scope, $timeout) {
$scope.title = "Controller 1";
$scope.cache = false;
$scope.records = [];
$scope.display = false;
$scope.loader = false;
$scope.add = function() {
console.log("adding");
$scope.display = false;
$scope.loader = true;
$timeout(function() {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}, {
"Name": "Lfds Atrfc",
"Country": "Austria"
}]
$scope.display = true;
$scope.loader = false;
}, 1500);
}
});
Sorry if the question is confusing, I will try to clarify any questions you may have.
