CSS transition-属性 angularJS 中的自动高度

Question

以下编码是当鼠标悬停在其 space 上时使用 CSS transition 扩展 Div。问题是高度，因为 transaction 可以定义特定的高度。定义特定高度仅适用于桌面版本，但对于移动版本，这将是一个问题。

对于桌面版，具体列表中是三列，因此定义具体高度即可。对于手机版，我将这三列合并为一列，因此无法定义特定高度。

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

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

CSS transition-属性 angularJS 中的自动高度

CSS transition-property auto height in augularJS

html

css

less

angularjs

pug