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