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

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

你确定 attrs.duration 是未定义的吗？试试。

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

});