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 dissolve transitions for SC.ContainerView.  The new content will
 14     fade in as the old content fades out of the view.
 15 
 16     To modify the dissolve animation, you can set the following transition
 17     options:
 18 
 19       - duration {Number} the number of seconds for the animation.  Default: 0.4
 20       - timing {String} the animation timing function.  Default: 'ease'
 21 
 22     @extends SC.ViewTransitionProtocol
 23     @see SC.View#animate for other timing functions.
 24     @since Version 1.10
 25   */
 26   DISSOLVE: {
 27 
 28     /** @private */
 29     willBuildInToView: function (container, content, previousStatechart, options) {
 30       content.adjust({ opacity: 0 });
 31     },
 32 
 33     /** @private */
 34     buildInToView: function (statechart, container, content, previousStatechart, options) {
 35       content.animate('opacity', 1, {
 36         duration: options.duration || 0.4,
 37         timing: options.timing || 'ease'
 38       }, function (data) {
 39         // We may already be in exiting state by the time we transition in.
 40         if (statechart.get('state') === 'entering') {
 41           statechart.entered();
 42         }
 43       });
 44     },
 45 
 46     /** @private */
 47     buildOutFromView: function (statechart, container, content, options, exitCount) {
 48       // We can call this transition repeatedly without effecting the current exit transition.
 49       if (exitCount == 1) {
 50         // Fade the current content at the same time.
 51         content.animate('opacity', 0, {
 52           duration: options.duration || 0.4,
 53           timing: options.timing || 'ease'
 54         }, function (data) {
 55           if (!data.isCancelled) {
 56             statechart.exited();
 57           }
 58         });
 59       }
 60     },
 61 
 62     /** @private */
 63     didBuildOutFromView: function (container, content, options) {
 64       // Reset the opacity in case this view is used elsewhere.
 65       content.adjust({ opacity: 1 });
 66     }
 67 
 68   }
 69 });
 70