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