I have a project using angularjs, and I am looking to incorporate fade-in effects on the content when data is received. Additionally, if the data exceeds the minimum height of an outer div, I would like the outer div to expand slowly and smoothly.
To demonstrate this concept, I created a Fiddle that simulates data retrieval and display.
Check out the JSFiddle Demo here
I attempted solutions from an older question related to my issue, but I found them confusing.
In the demo, upon clicking "click to add", there is a $timeout before loading records with data. The data appears quickly, causing the outer div 'card' to expand rapidly in response to the inner content.
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);
}
});
If you have any questions or need clarification on my inquiry, feel free to ask.