I attempted to smoothly increase and decrease the height of a div using CSS animations, but I struggled due to my limited knowledge in this area.
Below is the code snippet:
<body ng-app="ang_app" ng-controller="ang_control01_main">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck" class="animate-show animate-hide"></div>
</body>
var app=angular.module('ang_app', ['ngAnimate']);
app.controller('ang_control01_main', function($scope) {
});
CSS Section:
.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
#myDiv {
transition: .5s;
background-color: lightblue;
height: 100px;
}
#myDiv.ng-hide {
transition: .5s;
height: 0;
}
If you check out this site https://codepen.io/LFeh/pen/ICkwe, you'll notice how they effectively increase and decrease the div height when hovering over it. Can anyone provide guidance on achieving a similar smooth effect in my case?