0

I am trying to create my own vertical progress bar, and am thinking of animating it via CSS3. I have currently set it up as a angular directive, where upon clicking, it should change the height property of the inner div. However, when I console.log(element.children().css('height')), it is returning me a blank value, even though I have already set the initial height to 10%?

angular.js directive

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 markup

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

1 回答 1

1

如果不包含 jquery，则 angularJS 默认使用 jquery lite。您可以在此处（第 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

于 2013-06-14T03:12:48.563 回答