Hey there again. I found another workaround and I decided to share it. It's
much cleaner than the first option I tried and I don't have to hardcode
high sizes to make it work.
I added a new div child to the div I'm animating and as o
<div ng-init="bool4=false">
<a href="#" ng-click="bool4=!bool4">Div 4</a>
<div id="c4" class="test" ng-show="bool4">
<div>
<p ng-repeat="x in [1, 2, 3, 4, 5]">test content</p>
</div>
</div>
</div>
and the javascript
removeClass : function(element, className, ops) {
//var height = element[0].offsetHeight;
var height = element.children()[0].offsetHeight;
return $animateCss(element, {
from : {
'max-height' : '0px',
'min-height' : '0px',
overflow :'hidden',
},
to : {
'max-height' : height + 'px', //'0px',
'min-height' : '1px',
},
duration: 0.5
});
}
I noticed that if the child's div content is not a div it will lose some of
its content (I tested with only <p> and the last one is always lost) but if
everything is contained within a div works as expected. I insist, not a
100% clean way, but it's much cleaner than any other I've tried.
See 'div2' in the plunker to see how the <p>'s are lost and 'div3' to see
how everything within a <div> works like a charm.
Hope it can help anyone.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
