/** * @private */Ext.define('Ext.fx.animation.Wipe', { extend: 'Ext.fx.Animation', alternateClassName: 'Ext.fx.animation.WipeIn', config: { /** * @cfg {String} * Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out', * or a cubic-bezier curve as defined by CSS. */ easing: 'ease-out', /** * @cfg {String} direction The direction of which the slide animates * @accessor */ direction: 'right', /** * @cfg {Boolean} out True if you want to make this animation wipe out, instead of slide in. * @accessor */ out: false }, refresh: function() { var me = this, el = me.getElement(), elBox = el.dom.getBoundingClientRect(), elWidth = elBox.width, elHeight = elBox.height, from = me.getFrom(), to = me.getTo(), out = me.getOut(), direction = me.getDirection(), maskFromX = 0, maskFromY = 0, maskToX = 0, maskToY = 0, mask, tmp; /* eslint-disable max-len */ switch (direction) { case 'up': if (out) { mask = '-webkit-gradient(linear, left top, left bottom, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))'; maskFromY = elHeight * 3 + 'px'; maskToY = elHeight + 'px'; } else { mask = '-webkit-gradient(linear, left top, left bottom, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))'; maskFromY = -elHeight * 2 + 'px'; maskToY = 0; } break; case 'down': if (out) { mask = '-webkit-gradient(linear, left top, left bottom, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))'; maskFromY = -elHeight * 2 + 'px'; maskToY = 0; } else { mask = '-webkit-gradient(linear, left top, left bottom, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))'; maskFromY = elHeight * 3 + 'px'; maskToY = elHeight + 'px'; } break; case 'right': if (out) { mask = '-webkit-gradient(linear, right top, left top, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))'; maskFromX = -elWidth * 2 + 'px'; maskToX = 0; } else { mask = '-webkit-gradient(linear, right top, left top, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))'; maskToX = -elWidth * 2 + 'px'; } break; case 'left': if (out) { mask = '-webkit-gradient(linear, right top, left top, from(transparent), to(#000), color-stop(66%, #000), color-stop(33%, transparent))'; maskToX = -elWidth * 2 + 'px'; } else { mask = '-webkit-gradient(linear, right top, left top, from(#000), to(transparent), color-stop(33%, #000), color-stop(66%, transparent))'; maskFromX = -elWidth * 2 + 'px'; maskToX = 0; } break; } /* eslint-enable max-len */ if (!out) { tmp = maskFromY; maskFromY = maskToY; maskToY = tmp; tmp = maskFromX; maskFromX = maskToX; maskToX = tmp; } from.set('mask-image', mask); from.set('mask-size', elWidth * 3 + 'px ' + elHeight * 3 + 'px'); from.set('mask-position-x', maskFromX); from.set('mask-position-y', maskFromY); to.set('mask-position-x', maskToX); to.set('mask-position-y', maskToY); // me.setEasing(out ? 'ease-in' : 'ease-out'); }});