Question

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

对于桌面版，特定列表是三列，因此定义特定高度为Ok。对于移动版本，我将这三列合并为一列，因此定义特定高度是不行的。

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

以上代码适用于我的问题。

augularJS中的CSS transition-property auto height

1 个答案: