我正在使用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;
});
}
}
});
最佳答案
你不能用百分比来做到这一点。您需要为其指定一个以像素为单位的值。默认情况下,您还需要将 attrs.expanded 设置为 true。进行这些编辑,它应该按照您想要的方式工作:
可滑动指令:
'height': '200px',
slideToggle 指令:
attrs.expanded = true;
这是一个工作示例:http://jsfiddle.net/6msqfyyp/
关于javascript - AngularSlideables 反向效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30206326/