Animated Popup Control

edited March 2012 in Enyo 2
Currently the Popup control displays a show/hide hard-transition behavior. I tend to like animations a bit better, so I took a page from @MaKleSoft & his animated toggle buttons ( ), and modified the Popup controls so that they fade in/out smoothly.


By default, the Popup control has a display block/none property, which can't be animated. Since I don't want to edit the actual control itself (and we don't need to) we need to set the opacity to 0 when the popup gets displayed & let CSS take care of the animation. Then when we fade out, we set a transitionEnd listener that lets us know when the transition ends. Once it ends, we set the display to none - retaining the way the actual Popup control works.

This works as expected in everything except IE9 and lower, in which case it just retains the default hard show/hide behavior.

To try it out, open up the popup.html file located in "onyx/examples/Samples/" and change it to look like this:

<!doctype html>

	onyx popup sample

	.big {
		font-size: 30px;
		padding: 10px;
	.onyx-popup {
		opacity: 0;
		-webkit-transition: opacity 0.2s linear;
	    -moz-transition: opacity 0.2s linear;
	    -o-transition: opacity 0.2s linear;
	    -ms-transition: opacity 0.2s linear;

		new (enyo.kind({
			name: "App",
			kind: "Control",
			classes: "onyx enyo-fit",
			components: [
				{classes: "onyx-toolbar-inline", components: [
					{kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
					{name: "popup", kind: "onyx.Popup", centered: true, floating: true, classes: "big", content: "Popup...", onHide: "hidePopup"},
					{kind: "onyx.Button", content: "Modal Popup...", ontap: "showPopup", popup: "modalPopup"},
					{name: "modalPopup", kind: "onyx.Popup", centered: true, modal: true, floating: true, classes: "big", content: "Modal Popup...", onHide: "hidePopup"}
			showPopup: function(inSender) {
				var p = this.$[inSender.popup];
				if (p) {;
				p.applyStyle("opacity", 1);
				var transitionEvent = this.whichTransitionEvent();
				if (transitionEvent !== undefined) {
					var listener = function( event ) {
						p.node.removeEventListener( transitionEvent, listener );
					p.node.addEventListener( transitionEvent, listener );
			hidePopup: function(inSender) {
				var transitionEvent = this.whichTransitionEvent();
				if (transitionEvent !== undefined) {
					inSender.applyStyle("display", "block");
					inSender.applyStyle("opacity", 0);
					var listener = function( event ) {
						inSender.applyStyle("display", "none");
						inSender.node.removeEventListener( transitionEvent, listener );
					inSender.node.addEventListener( transitionEvent, listener );
			whichTransitionEvent: function(){
			    var t;
			    var el = document.createElement('el');
			    var transitions = {
			    for(t in transitions){
			        if([t] !== undefined ){
			            return transitions[t];

All that changed:
1) We added some extra CSS properties for .onyx-popup
2) Added onHide events to our popups
3) Modified the showPopup function - fades in & displays the popup
4) Added the hidePopup function - fades out & hides the popup
5) Added whichTransitionEvent function - tells us what transitionEnd our browser supports


Sign In or Register to comment.