I am currently working on my code to create multiple divs with a hide button in each one. When the hide button is clicked, I want the corresponding div to fade away and the divs below it to smoothly move up to fill the space left behind.
Below is the snippet of my HTML code:
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-hide="x.show">
<p>{{ x.text }}
</p>
<button ng-click="toggle($index)">Hide</button>
</div>
</body>
The JavaScript file contains the following script:
var app = angular.module('task');
app.controller('repeat',function($scope){
$scope.array = [{
show: true,
text:'Sample Text 1'},
{
show: true,
text:'Sample Text 2'},
{
show: true,
text:'Sample Text 3'}];
$scope.toggle = function(){
$scope.array[index].show = false ;
};
})
Lastly, this is the CSS code that I have included:
.ng-hide-add { animation:1s fade ease; }
@keyframes fade{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
I have researched various slider animations online and tried to modify them for my project without success so far.
If you have any suggestions on what additional code I should implement to achieve the desired animation effect, please share your insights. Your input would be greatly valued. Thank you!