折叠/展开的角

Question

动画我有这样一些代码这个

<div ng-click="showMore = true">show more</div> 
<div class="show-more' ng-show="showMore"> 
    <div class="cell"> 
     //some span 
    </div> 
    <div class="cell"> 
     //some div 
    </div> 
    <div ng-click="showMore = false">show less</div> 
</div> 

，当用户点击“显示更多”，我想表明在动漫

其余的在我的CSS

.cell { 
    padding-top: 20px; 
    padding-bottom: 15px; 
    height: 110px; 
} 

我得摆脱ng-show或ng-hide，因为display:block或display:none不会让transition: height 0.5s linear;工作。所以我试着将.cell的高度设置为0，当它被展开时将它设置为110px，但是当它折叠时单元格高度不是0，因为它包含<span>或<div>，它们有高度和填充

如何在我的情况下动画展开/折叠过程？在此先感谢

Answer 1

这是否适合你;]？

.show-more { 
 
    -webkit-transition: max-height 1s; 
 
    -moz-transition: max-height 1s; 
 
    -ms-transition: max-height 1s; 
 
    -o-transition: max-height 1s; 
 
    transition: max-height 1s; 
 
    background: #e5feff; 
 
    overflow: hidden; 
 
    max-height: 0; 
 
} 
 
.show-more.show { 
 
    max-height: 300px; 
 
}

<div ng-click="showMore = true">show more</div> 
 
<div class="show-more" ng-class="{'show': showMore}"> 
 
    <div class="cell"> 
 
     //some span 
 
    </div> 
 
    <div class="cell"> 
 
     //some div 
 
    </div> 
 
    <div ng-click="showMore = false">show less</div> 
 
</div>

Answer 2

为什么你试图通过脚本方式？你为什么不使用Bootstrap Collapse class，它的所有内置动画将附带