1 // ========================================================================== 2 // Project: SproutCore 3 // Copyright: @2013 7x7 Software, Inc. 4 // License: Licensed under MIT license (see license.js) 5 // ========================================================================== 6 sc_require('views/container'); 7 8 9 SC.mixin(SC.ContainerView, 10 /** @scope SC.ContainerView */ { 11 12 /** @class 13 Provides fade through color transitions to SC.ContainerView. The old 14 content will fade out to a color and the new content will then fade in. 15 16 To modify the fade through color animation, you can set the following 17 transition options: 18 19 - color {String} any valid CSS Color. Default: 'black' 20 - duration {Number} the number of seconds for the animation. Default: 0.4 21 - timing {String} the animation timing function. Default: 'ease' 22 23 @extends SC.ViewTransitionProtocol 24 @see SC.View#animate for other timing functions. 25 @since Version 1.10 26 */ 27 FADE_COLOR: { 28 29 /** @private */ 30 willBuildInToView: function (container, content, previousStatechart, options) { 31 var color, 32 colorView; 33 34 content.adjust({ opacity: 0 }); 35 36 // Create a color view to fade through. 37 color = SC.Color.from(options.color || 'black'); 38 colorView = SC.View.create({ 39 layout: { opacity: 0, zIndex: 1 }, 40 render: function (context) { 41 context.addStyle('background-color', color.get('cssText')); 42 } 43 }); 44 container.appendChild(colorView); 45 }, 46 47 /** @private */ 48 buildInToView: function (statechart, container, content, previousStatechart, options) { 49 var childViews = container.get('childViews'), 50 colorView; 51 52 colorView = childViews.objectAt(childViews.get('length') - 1); 53 54 // Fade the color in (uses half the total duration) 55 colorView.animate('opacity', 1, { 56 duration: options.duration * 0.5 || 0.4, 57 timing: options.timing || 'ease-in' 58 }, function () { 59 // Show new content, then fade the color out. 60 content.adjust('opacity', 1); 61 62 colorView.animate('opacity', 0, { 63 duration: options.duration * 0.5 || 0.4, 64 timing: options.timing || 'ease-in' 65 }, function (data) { 66 // It's best to clean up the colorView here rather than try to find it again on teardown, 67 // since multiple color views could be added. 68 container.removeChild(this); 69 this.destroy(); 70 71 // We may already be in exiting state by the time we transition in. 72 if (statechart.get('state') === 'entering') { 73 statechart.entered(); 74 } 75 }); 76 }); 77 }, 78 79 /** @private */ 80 buildOutFromView: function (statechart, container, content, options, exitCount) { 81 // Do nothing. 82 } 83 84 } 85 86 }); 87