angular.js 中的垂直进度条没有显示正确的高度

Question

我正在尝试创建自己的垂直进度条，并正在考虑通过 CSS3 对其进行动画处理。我目前已将其设置为角度指令，点击后，它应该更改内部 div 的高度属性。但是，当我 console.log(element.children().css('height')) 时，它返回给我一个空白值，即使我已经将初始高度设置为 10%？

angular.js 指令

teacherApp.directive('clickToChangeHeight', function(){
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        var height = element.children().css('height');
        console.log(height)
        //element.children().css('height', finalHeight);
      });
    }
  }
})

玉标记

div(ng-controller='TvCtrl')
  .outer(click-to-change-height)
    .inner

CSS

.outer {
  position: relative;
  overflow: hidden;
  width: 30px;
  height: 140px;
  border: 2px solid #ccc;
}

.inner {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  width: 100%;
  height: 10%;
  background-color: #999;
  -webkit-transition: height 2s;
}

Answer 1

如果你不包含 jquery，angularJS 默认使用 jquery lite。您可以在源代码here（第 405 行）中找到 jquery lite 如何实现 css 函数。如图所示，当您不将“value”参数传递给函数时，它只会返回它在元素的 style 属性中找到的内容：

val = val || element.style[name];

这意味着如果你设置了 .inner 的样式属性

<div class="inner style="height:30px"> </div>

然后你会在console.log中打印出30px，但如果你没有，它将找不到你在css文件中设置的高度值。

但是，我认为您想要的是使用 css 函数来设置高度而不是仅仅打印，并且只需使用

element.children().css('height', finalHeight)

您认为可以根据需要设置样式。由于现在css函数是setter，并将inner的style属性的“height”设置为finalHeight