I'm using AngularSlideables to toggleSlide a modal in an Ionic
project.
Here's a working fiddle: http://jsfiddle.net/3sVz8/19/
But my initial height is 100% instead of 0px, which means I want to slide up upfront. How can I do that? Please help.
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;
});
}
}
});
You can't do it with a percentage. You'll need to give it a value in pixels. You also need to set attrs.expanded to true by default. Make these edits and it should work the way you want:
slideable directive:
'height': '200px',
slideToggle directive:
attrs.expanded = true;
Here's a working example: http://jsfiddle.net/6msqfyyp/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.