I am trying to add a collapsable element to my app. I don't want to use jQuery or any other dependency than Angular.
I have built a very simple demo here: http://jsfiddle.net/eg69cfub/2/
The elements are displayed/hidden properly the only problem is the transition. I don't understand why it is so abrupt, I'd like it to be smooth.
How can I fix this please?
HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='isVisible = !isVisible'> Hello {{ test }}</div>
<div class='body' ng-class='{ collapsed: isVisible }'> Goodbye </div>
</li>
</ul>
</div>
</div>
CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.body {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
}
.collapsed {
min-height: 0;
height: 0;
}
JS:
var myApp = angular.module('myApp',[]);
function accordionCtrl($scope) {
$scope.isVisible = false;
}
In Angular, you can use ng-animate to perform smooth animations with ng-show directive (along with many other directives). Here is your fiddler with animations: http://jsfiddle.net/fu2jw6j1/
Your HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='$scope.isVisible=!$scope.isVisible'> Hello {{ test }}</div>
<div class='box' ng-show="$scope.isVisible" ng-animate="'box'"> Goodbye </div>
</li>
</ul>
</div>
And here's the CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.box {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
height: 20px;
}
.box-show-setup, .box-hide-setup {
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
-ms-transition:all linear 0.3s;
-o-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.box-show-setup { height: 0; }
.box-show-setup.box-show-start { height:20px }
.box-hide-setup {height: 0; }
.box-hide-setup.box-hide-start { height: 0px; }
You can find more about ng-animate directive in Angular's documentation: https://docs.angularjs.org/api/ngAnimate
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.