html - angular.js 中的垂直进度条未显示正确的高度

Question

我正在尝试创建我自己的垂直进度条，并正在考虑通过 CSS3 对其进行动画处理。我目前将它设置为一个 Angular Directive(指令)，点击后，它应该改变内部 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);
      });
    }
  }
})

Jade 标记

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。您可以在源代码中找到 jquery lite 如何实现 css 功能 here (第 405 行)。如图所示，当您不将“value”参数传递给函数时，它只会返回它在元素的样式属性中找到的内容:

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 的样式属性的“高度”设置为 finalHeight