html - angularJS 中的 CSS 过渡属性自动高度

Question

下面的代码是使用CSS transition在鼠标悬停在其空间时展开Div。问题在于 transaction 的高度可以定义特定的 height。定义特定高度仅适用于桌面版本，但对于移动版本，这将是个问题。

对于桌面版，具体的列表是三列的，所以定义具体的高度就可以了。对于移动版本，我将这三列合并为一列，因此无法定义特定高度。

div.mycolumn {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

div.mycolumn:hover {
 max-height: 500px; <<<< WANT AUTO HEIGHT INSTEAD
 transition: max-height 0.25s ease-in;
}

我的问题是 AngularJs 可以获取当前 Div 的特定高度并将其传递给 CSS，(我使用的是 LESS。)

div.mycolumn
    .container
        .row
            .col-xs-4.col-sm-12
                .row(data-ng-repeat="data in mydata1")
                    .col-xs-12.col-sm-12.col-md-3
                        {{data.myname}}
            .col-xs-4.col-sm-12
                .row(data-ng-repeat="data in mydata2")
                    .col-xs-12.col-sm-12.col-md-3
                        {{data.myname}}
            .col-xs-4.col-sm-12
                .row(data-ng-repeat="data in mydata3")
                    .col-xs-12.col-sm-12.col-md-3
                        {{data.myname}}

Answer 1

.category-box {
  max-height: 0;
  transition: max-height 0.5s ease-out;
  overflow: hidden;
}

//For Mobile
.category-box {
  &.show {
    max-height: 999px;
    transition: max-height 0.5s ease-in;
  }
}

//For Desktop
@media screen and (min-width: 48em){
  .category-box {
    &.show {
      max-height: 500px;
      transition: max-height 0.5s ease-in;
    }
  }
}

以上代码可以解决我的问题。