I have been attempting to add a transition duration for when my trash-content is displayed. I tried implementing a solution I found on Show hidden div on ng-click within ng-repeat, specifically the variation recommended by Joseph Silber. However, I am puzzled as to why it works in his example but not in mine. My goal is to have the div resize slowly.
HTML section
<div id="trash" ng-app="myApp" ng-controller="test">
<div class="trash-content" ng-class="{ 'hidden': ! showDetails }">
<ul>
<li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>
</li>
</ul>
</div>
<button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
</div>
CSS section
.trash-content {
width: 300px;
height: 400px;
background-color: lightgrey;
border: 1px solid #e0e0e0;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
color: rgb(102, 103, 105);
overflow: hidden;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
transition: 2s;
}
.hidden {
max-height: 0;
max-width: 0;
}
Check out the issue on Fiddle : http://jsfiddle.net/63xoxx37/1/