Question

我在垃圾内容显示时尝试应用转换时长。我一直试图使用Show hidden div on ng-click within ng-repeat上看到的解决方案，正是约瑟夫·西尔伯提出的变化。我不明白为什么它正在研究他的榜样而不是我的榜样。我希望div能够慢慢调整大小。

HTML部分

<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部分

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

小提琴上的完整问题： http://jsfiddle.net/63xoxx37/1/

Answer 1

尝试此操作（使用opacity:0;代替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>

对ng-class的css过渡效应

1 个答案: