extjs/packages/core/src/fx/animation/Wipe.js

   1 /**
   2  * @private
   3  */
   4 Ext.define('Ext.fx.animation.Wipe', {
   5     extend: 'Ext.fx.Animation',
   6     alternateClassName: 'Ext.fx.animation.WipeIn',
   7
   8     config: {
   9         /**
  10          * Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out',
  11          * or a cubic-bezier curve as defined by CSS.
  12          */
  13         easing: 'ease-out',
  14
  15         /**
  16          * @cfg {String} direction The direction of which the slide animates
  17          * @accessor
  18          */
  19         direction: 'right',
  20
  21         /**
  22          * @cfg {Boolean} out True if you want to make this animation wipe out, instead of slide in.
  23          * @accessor
  24          */
  25         out: false
  26     },
  27
  28     refresh: function() {
  29         var me = this,
  30             el        = me.getElement(),
  31             elBox     = el.dom.getBoundingClientRect(),
  32             elWidth   = elBox.width,
  33             elHeight  = elBox.height,
  34             from      = me.getFrom(),
  35             to        = me.getTo(),
  36             out       = me.getOut(),
  37             direction = me.getDirection(),
  38             maskFromX = 0,
  39             maskFromY = 0,
  40             maskToX   = 0,
  41             maskToY   = 0,
  42             mask, tmp;
  43
  44         switch (direction) {
  45             case 'up':
  46                 if (out) {
  47                     mask = '-webkit-gradient(linear, left top, left bottom, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))';
  48                     maskFromY = elHeight * 3 + 'px';
  49                     maskToY = elHeight + 'px';
  50                 } else {
  51                     mask = '-webkit-gradient(linear, left top, left bottom, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))';
  52                     maskFromY = -elHeight * 2 + 'px';
  53                     maskToY = 0;
  54                 }
  55
  56                 break;
  57
  58             case 'down':
  59                 if (out) {
  60                     mask = '-webkit-gradient(linear, left top, left bottom, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))';
  61                     maskFromY = -elHeight * 2 + 'px';
  62                     maskToY = 0;
  63                 } else {
  64                     mask = '-webkit-gradient(linear, left top, left bottom, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))';
  65                     maskFromY = elHeight * 3 + 'px';
  66                     maskToY = elHeight + 'px';
  67                 }
  68
  69                 break;
  70
  71             case 'right':
  72                 if (out) {
  73                     mask = '-webkit-gradient(linear, right top, left top, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))';
  74                     maskFromX = -elWidth * 2 + 'px';
  75                     maskToX = 0;
  76                 } else {
  77                     mask = '-webkit-gradient(linear, right top, left top, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))';
  78                     maskToX = -elWidth * 2 + 'px';
  79                 }
  80
  81                 break;
  82
  83             case 'left':
  84                 if (out) {
  85                     mask = '-webkit-gradient(linear, right top, left top, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))';
  86                     maskToX = -elWidth * 2 + 'px';
  87                 } else {
  88                     mask = '-webkit-gradient(linear, right top, left top, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))';
  89                     maskFromX = -elWidth * 2 + 'px';
  90                     maskToX = 0;
  91                 }
  92
  93                 break;
  94         }
  95
  96         if (!out) {
  97             tmp = maskFromY;
  98             maskFromY = maskToY;
  99             maskToY = tmp;
 100
 101             tmp = maskFromX;
 102             maskFromX = maskToX;
 103             maskToX = tmp;
 104         }
 105
 106         from.set('mask-image', mask);
 107         from.set('mask-size', elWidth * 3 + 'px ' + elHeight * 3 + 'px');
 108         from.set('mask-position-x', maskFromX);
 109         from.set('mask-position-y', maskFromY);
 110
 111         to.set('mask-position-x', maskToX);
 112         to.set('mask-position-y', maskToY);
 113
 114         // me.setEasing(out ? 'ease-in' : 'ease-out');
 115     }
 116 });