Animation. Expand div hight without setting directli it's height (angular app)

Question

Here is my code. http://jsfiddle.net/anastsiacrs/Lt7aP/1639/

[Please, run example in jsfiddle, stackoverflow's code does not run]

function XController($scope) {
    $scope.model={isHidden:true};
}

.open-div{
  background-color:red;
  //height:260px;
}
.hidden-div{
  background-color:green;
  //height:60px;
}
.transformable {
    -webkit-transition: 3000ms linear;
    -moz-transition: 3000ms linear;
    -o-transition: 3000ms linear;
    -ms-transition: 3000ms linear;
    transition: 3000ms linear;
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
  <p>{{isHidden}}  </p>
  <div ng-hide="model.isHidden"  >
     <div>Hello XXX</div>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
  </div>
</div>
</div>

As you can see, without explicit height animation doesn't apply for this property. What is the possible way to solve this issue. May be there are some library or link, that will help me.
If height is directly setted to element, there is another one issue wiht div content. It is apper before div is fully expanded.

some tips will be very pleased

for the 2, you can add dislplay:none css property – AshBringer Jan 05 '16 at 12:18 — AshBringer, Jan 05 '16 at 12:18
@BipBip for div content? until what? – anastsiacrs Jan 05 '16 at 12:56 — anastsiacrs, Jan 05 '16 at 12:56

score 0 · Answer 1 · answered Jan 05 '16 at 12:32

0

Have you tried changing the CSSheight to min-height? If the hidden div is bigger than the minimum height it will still expand. Should solve your issue.

answered Jan 05 '16 at 12:32

Liam Kenneth

982
1
11
21

Yes, i tried. If min-heigt is used for both elements, animation is applied only on div close http://jsfiddle.net/anastsiacrs/1drry10r/ – anastsiacrs Jan 05 '16 at 12:35
On your fiddle I gave the open class a min-height and the hidden a fixed height. This might help http://stackoverflow.com/a/8331169/1395510 Shows how to make the height transition so it doesn't just appear – Liam Kenneth Jan 05 '16 at 12:41
Thx for link. According you advice with min height http://jsfiddle.net/anastsiacrs/1xucbjwp/ - it does not work. One of appropriate solution for me is animate padding http://jsfiddle.net/anastsiacrs/2zbxmbxw/1/ But it is still not what i want – anastsiacrs Jan 05 '16 at 13:16

score 0 · Accepted Answer · answered Jan 14 '16 at 08:56

0

Bootstrap collapse.js can be used here.

http://v4-alpha.getbootstrap.com/components/collapse/

answered Jan 14 '16 at 08:56

anastsiacrs

159
4
18

Animation. Expand div hight without setting directli it's height (angular app)

2 Answers2