css transition effect on ng-class

Question

I'm trying to apply a transition duration when my trash-content shows up. I've been trying to use a solution seen on Show hidden div on ng-click within ng-repeat, precisely the variation suggested by Joseph Silber. I don't understand why it's working on his example but not on mine. I'd like the div to slowly resize.

HTML part

<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 part

.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;
}

Full problem on Fiddle : http://jsfiddle.net/63xoxx37/1/

what is the problem? its slowly opening and closing! what is it supposed to do? — Minzkraut, Sep 02 '15 at 12:33
It was the wrong URL, I've changed it. But the effect is supposed to be the same — Carvallegro, Sep 02 '15 at 12:34
your going to have to use width, in order for a css transition to fire it needs a start value and an end value. It gives a strange animation when I use it in the fiddle, but I kinda like it — Millard, Sep 02 '15 at 12:51
Ho okay, I get it ! Thanks a lot. Can you write a answer ? I'll tag it as the solution — Carvallegro, Sep 02 '15 at 12:53

score 0 · Accepted Answer · answered Sep 02 '15 at 13:06

Try this (use opacity:0; instead of display:none;):

.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);
    transition: 2s linear all;
    -webkit-transition: 2s linear all;
    opacity: 1;
}
.h {
    max-height: 0;
    max-width: 0;
    opacity: 0;
   }

    <div id="trash" ng-app="myApp" ng-controller="test">
        <div class="trash-content" ng-class="{ 'h': ! 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 transition effect on ng-class

1 Answers1