Element.Slide.js

(function(){

var className = 'slide',
	classNameIn = 'in',
	key = 'slide:styles',
	active = 'slide:active',
	chain = 'slide:chain';

var properties = {
	height: 0,
	paddingTop: 0,
	paddingBottom: 0,
	borderTopWidth: 0,
	borderBottomWidth: 0,
	marginTop: 0,
	marginBottom: 0,
	opacity: 0.01
};

var list = Object.keys(properties);

var chainOf = function(element){
	var instance = element.retrieve(chain);
	if (!instance) element.store(chain, (instance = new Chain));
	
	return instance;
};

var hasHeight = function(element){
	return !!element.getStyle('height').toInt();
};

var getStyles = function(element){
	var styles = element.retrieve(key),
		previous = element.getStyle('height');
	
	styles.height = element.setStyle('height', 'auto').getComputedStyle('height');
	element.setStyle('height', previous);

	return styles;
};

var slide = function(element, from, to, slideIn){
	element.store(active, true).setStyles(from);
	
	(function(){
		element.addClass(className);
		if (slideIn) element.addClass(classNameIn);

		(function(){
			var event = function(event){
				if (event.event.propertyName != 'height') return;
				
				this.eliminate(active).removeClass(className).removeClass(classNameIn);
				this.removeEvent('transitionend', event).fireEvent('slideend');
				chainOf(this).callChain();
			};

			element.setStyles(to).addEvent('transitionend', event);
		}).delay(1);
	}).delay(1);
};

Element.implement({

	hide: function(){
		if (this.retrieve(active)){
			chainOf(this).chain(this.hide.bind(this));
			return this;
		}

		if (hasHeight(this))
			this.store(key, this.getStyles(list)).setStyles(properties);

		chainOf(this).callChain();
		
		return this;
	},

	slideIn: function(){
		if (this.retrieve(active)){
			chainOf(this).chain(this.slideIn.bind(this));
			return this;
		}

		var styles = hasHeight(this) ? this.getStyles(list) : getStyles(this);
		this.store(key, styles);

		slide(this, properties, styles, true);
		
		return this;
	},

	slideOut: function(){
		if (this.retrieve(active)){
			chainOf(this).chain(this.slideOut.bind(this));
			return this;
		}

		if (!hasHeight(this)) return this;
		
		var styles = this.getStyles(list);
		this.store(key, styles);
		
		slide(this, styles, properties);

		return this;
	}

});

})();

Slide.scss

.slide {
	@include transition-property('opacity, height, padding, margin, border');
	@include transition-delay('0, 0, 0, 0, 600ms');
	@include transition-duration('750ms, 750ms, 750ms, 750ms, 150ms');

	&.in {
		@include transition-delay('0');
	}
}