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

}）;

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

1 个答案: