angularslideables 反转效果

Question

我正在使用 AngularSlideables 在 Ionic 项目中切换模式。

这是一个有效的 fiddle：http://jsfiddle.net/3sVz8/19/

但我的初始高度是 100% 而不是 0px，这意味着我想提前向上滑动。我怎样才能做到这一点？请帮忙。

angular.module('angularSlideables', [])
.directive('slideable', function () {
    return {
        restrict:'C',
        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) ? '1s' : 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
                });
            };
        }
    };
})

.directive('slideToggle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var target = document.querySelector(attrs.slideToggle);
            attrs.expanded = false;
            element.bind('click', function() {
                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 = '0px';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
});

Answer 1

你不能用百分比来做。你需要给它一个像素值。您还需要将 attrs.expanded 默认设置为 true。进行这些编辑，它应该会按照您想要的方式工作：

可滑动指令：

'height': '200px',

slideToggle 指令：

attrs.expanded = true;

这是一个工作示例：http://jsfiddle.net/6msqfyyp/

angularslideables 反转效果

angularslideables reverse effect

javascript

angularjs

angularjs-directive

ionic