设置相对于高度的过渡速度

Question

我正在Angular中构建一个可折叠指令，我想使幻灯片的打开/关闭速度相对于元素的高度。

类似以下内容:

app.directive('slider', 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
                var dur = ((element.clientHeight / 100) * 0.1) + "s";
                console.log("duration", dur);
                attrs.duration = (!attrs.duration) ? dur : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});
app.directive('sliderToggle', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.expanded = false;
            element.off("click").bind('click', function (e) {
                var target = document.querySelector(attrs.sliderToggle);
                var content = target.querySelector('.slideable_content');
                if (!attrs.expanded) {
                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
});

正如您可能看到或没有看到的，var dur是我尝试这样做的地方。在我看来，这是行不通的。

这里有人能给我指个方向吗?

提前感谢!

Answer 1

你确定吗?持续时间未定义?试一试。

app.directive('slider', 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
            var dur = ((element.clientHeight / 100) * 0.1) + "s";
            if (attrs.duration) {
              dur = attrs.duration;
              console.log('using attrs.duration as duration!', attrs.duration)
            }
            attrs.easing = (!attrs.easing) ? 'ease' : attrs.easing;
            $(element).css({
                'overflow': 'hidden',
                'height': '0',
                'transitionProperty': 'height',
                'transitionDuration': dur,
                'transitionTimingFunction': attrs.easing
            });
        };
    }
};

});