我面临的问题是内容容器的高度没有变化.
这是一个吸烟者：http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview
如果单击“显示更多”,则可以看到内容是如何隐藏的,而不是显示作业的高度更改.
JS：
app.directive('sliderContentDirective',function () {
return {
restrict:'A',compile: function (element,attr) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
return function postLink(scope,element,attrs) {
// default properties
attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden','height': '0px','transitionProperty': 'height','transitionDuration': attrs.duration,'transitionTimingFunction': attrs.easing
});
};
}
};
});
app.directive('sliderToggleDirective',function($document,$timeout) {
return {
restrict: 'AE',scope: {
target: "@"
},link: function(scope,attrs) {
var timeoutFunc = function () {
var target = angular.element($document[0].querySelector("#" + scope.target))[0];
attrs.expanded = false;
element.bind('click',function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
}
else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
$timeout(timeoutFunc,0);
}
}
});
如果我检查show-jobs元素,我可以看到它的初始高度为312px.如果我删除它,然后它按预期工作.
解决方法
>在动画结束时将节的高度设置为自动,这样如果展开嵌套的div,则该节将正确展开.
>在用户尝试将其关闭之前,将高度设置为固定高度,然后将高度设置为0,以便关闭动画正常工作.
要完成第一部分,您可以定义一个函数,将部分的高度调整为auto,并在展开动画完成后调用它.
var adjustHeightFunc = function() {
var target = angular.element($document[0].querySelector("#" + scope.target))[0];
if (attrs.expanded) {
var content = target.querySelector('.slideable_content');
target.style.height = 'auto';
}
}
由于展开动画需要0.7秒,你可以调用adjustHeightFunc函数,超时为0.8秒(我觉得这不是最佳选择,因为如果你改变动画的持续时间,你还需要改变这个超时,但它是到目前为止我找到的最佳解决方案,欢迎任何其他建议).因此,在onClick函数的最后,您可以：
$timeout(adjustHeightFunc,800);
要做的第二部分是在折叠部分时不要将部分的高度设置为0,而是始终将其设置为其内容的高度.执行此操作后,如果该部分应该折叠,则使用$timeout调用一个单独的函数,值为0(这样它将在一个单独的摘要周期执行),它将该部分的高度设置为0,从而触发崩溃动画.你的onClick函数因此变成这样：
element.bind('click',function() {
var content = target.querySelector('.slideable_content');
var y = content.clientHeight;
target.style.height = y + 'px';
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0)';
content.style.border = 0;
}
else {
$timeout(closeAccordionFunc,0);
}
attrs.expanded = !attrs.expanded;
$timeout(adjustHeightFunc,800);
});
编辑：事实证明,从注释设置中,closeAccordionFunc将以超时0执行,并不适用于所有浏览器.解决方法是声明一个CSS类,它将元素的高度设置为auto(使用！important来直接覆盖元素上的高度集),并使用Angular的$animate服务向元素添加/删除此类并执行删除类后closeAccordionFunc.因此更新的onClick函数是：
element.bind('click',0)';
content.style.border = 0;
}
else {
$animate.removeClass(angular.element(target),'auto',function(){$timeout(closeAccordionFunc);});
}
attrs.expanded = !attrs.expanded;
if (attrs.expanded) {
$timeout(adjustHeightFunc,800);
}
});
另见in Plunker.
