collapse / expand animation in Angular
13,715
var app = angular.module("myApp", []);
// Create a Controller named "myCtrl"
app.controller("myCtrl", function($scope) {
showMore = false;
});
.show-more {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.show-more.show {
max-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="show-more" ng-class="{'show': showMore}">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
</div>
<button type="button" ng-click="showMore = !showMore">
Show {{ showMore ? 'Less' : 'More' }} ...
</button>
</div>
Related videos on Youtube
Author by
lynn.fang
Updated on September 16, 2022Comments
-
lynn.fang almost 2 years
I have some code like this
<div ng-click="showMore = true">show more</div> <div class="show-more' ng-show="showMore"> <div class="cell"> //some span </div> <div class="cell"> //some div </div> <div ng-click="showMore = false">show less</div> </div>
and when user clicks 'show more', I want to show the rest in animation
in my css
.cell { padding-top: 20px; padding-bottom: 15px; height: 110px; }
I have to get rid of
ng-show
orng-hide
, becausedisplay:block
ordisplay:none
would not maketransition: height 0.5s linear;
work. So I tried to set the height of.cell
to be 0 when it is collapsed, and set it as 110px when it is expanded, but cell height is not really 0 when it is collapsed, because it contains<span>
or<div>
which have height and paddinghow to animate the expand/collapse process in my case? thanks in advance