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，因为它包含{{1} }或<span>有高度和填充

如何在我的案例中为展开/折叠过程设置动画？提前谢谢

Answer 1

这适合你吗？]？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为什么要以脚本方式尝试此操作？你为什么不使用Bootstrap Collapse class，它将带有内置的动画

在Angular中折叠/展开动画

2 个答案: