0

独自の垂直プログレス バーを作成しようとしており、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;
}
4

1 に答える 1

1

jquery を含めない場合、angularJS はデフォルトで jquery lite を使用します。jquery lite が css 関数をどのように実装しているかは、こちらのソース コード(405 行目) で確認できます。示されているように、「値」パラメーターを関数に渡さない場合、要素のスタイル属性で見つかったものを返すだけです。

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

つまり、.inner のスタイル属性を設定した場合

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

次に、console.log に 30px が出力されますが、そうでない場合は、css ファイルで設定した高さの値が見つかりません。

ただし、印刷するだけでなく、css関数を使用して高さを設定し、使用するだけだと思います

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

あなたが思ったように、スタイルを設定しても問題ありません。今ではcss関数がセッターであり、インナーのスタイル属性の「高さ」をfinalHeightに設定します

于 2013-06-14T03:12:48.563 に答える