_ff-addon-snippet-XulPanelAnimShowAnimHide - Copy paste script for Firefox Scratchpad with Environment set to Browser. It adds a panel as type arrow. All type arrow panels are animated on show but not on out, this snippet makes it animate on hide as well. Option to remove panel on end of animation or just hide it (see comments one Line 18 and 19…

_ff-addon-snippet-XulPanelAnimShowAnimHide.js

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var props = {
	type: 'arrow',
	style: 'width:300px;height:100px;'
}
for (var p in props) {
	panel.setAttribute(p, props[p]);
}

win.document.querySelector('#mainPopupSet').appendChild(panel);

panel.addEventListener('popuphiding', function (e) {
	e.preventDefault();
	e.stopPropagation();
	//panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
	panel.addEventListener('transitionend', function () {
		//panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
		panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
	}, false);
	panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);

panel.openPopup(null, 'overlap', 100, 100);

Rev2

• Updated description to snippet from demo

Rev3

• Updated description to snippet from demo