Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(panel): resolve animation issues #11947

Merged
merged 2 commits into from
Jun 23, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 29 additions & 31 deletions src/components/panel/panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -1631,7 +1631,7 @@ MdPanelRef.prototype.destroy = function() {
this.config.onDomRemoved = null;
this.config.onRemoving = null;
this.config.onOpenComplete = null;
this._interceptors = null;
this._interceptors = undefined;
};


Expand Down Expand Up @@ -1705,7 +1705,7 @@ MdPanelRef.prototype.hide = function() {
};
var removeFromGroupOpen = function() {
if (self.config.groupName) {
var group, index;
var index;
angular.forEach(self.config.groupName, function(group) {
group = self._$mdPanel._groups[group];
index = group.openPanels.indexOf(self);
Expand Down Expand Up @@ -2023,6 +2023,7 @@ MdPanelRef.prototype._updatePosition = function(init) {
// Hide the panel now that position is known.
if (init) {
this.panelEl.removeClass('_md-panel-offscreen');
this.innerWrapper.removeClass('_md-panel-offscreen');
this.panelContainer.addClass(MD_PANEL_HIDDEN);
}

Expand Down Expand Up @@ -2319,34 +2320,34 @@ MdPanelRef.prototype._animateOpen = function() {

/**
* Animate the panel closing.
* @returns {!Q.IPromise} A promise that is resolved when the panel has
* animated closed.
* @returns {!Q.IPromise} A promise that is resolved when the panel has animated closed.
* @private
*/
MdPanelRef.prototype._animateClose = function() {
var self = this;
var animationConfig = this.config['animation'];

if (!animationConfig) {
this.panelContainer.removeClass('md-panel-is-showing');
this.panelContainer.removeClass('_md-panel-shown');
return this._$q.when(this);
}

var self = this;
return this._$q(function(resolve) {
var done = function() {
self.panelContainer.removeClass('md-panel-is-showing');
resolve(self);
};
var warnAndClose = function() {
self._$log.warn(
'mdPanel: MdPanel Animations failed. ' +
'Hiding panel without animating.');
done();
};
} else {
return this._$q(function (resolve) {
var done = function () {
self.panelContainer.removeClass('md-panel-is-showing');
// Remove the transform so that re-used panels don't accumulate transforms.
self.panelEl.css('transform', '');
resolve(self);
};
var warnAndClose = function () {
self._$log.warn(
'mdPanel: MdPanel Animations failed. Hiding panel without animating.');
done();
};

animationConfig.animateClose(self.panelEl)
.then(done, warnAndClose);
});
animationConfig.animateClose(self.panelEl).then(done, warnAndClose);
});
}
};


Expand Down Expand Up @@ -2467,7 +2468,7 @@ MdPanelRef.prototype._simpleBind = function(callback, self) {


/**
* @param {function} callback
* @param {function|IQResolveReject} callback
* @param {!Object} self
* @return {function} Callback function with a self param.
*/
Expand Down Expand Up @@ -2882,7 +2883,7 @@ MdPanelPosition.prototype.getRight = function() {

/**
* Gets the value of `transform` for the panel.
* @returns {string}
* @returns {string} representation of the translateX and translateY rules and values
*/
MdPanelPosition.prototype.getTransform = function() {
var translateX = this._reduceTranslateValues('translateX', this._translateX);
Expand Down Expand Up @@ -3369,8 +3370,7 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl) {
/**
* Animate the panel close.
* @param {!JQLite} panelEl
* @returns {!Q.IPromise} A promise that resolves when the close
* animation is complete.
* @returns {!Q.IPromise} A promise that resolves when the close animation is complete.
*/
MdPanelAnimation.prototype.animateClose = function(panelEl) {
var animator = this._$mdUtil.dom.animator;
Expand All @@ -3391,8 +3391,7 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) {
transitionOutClass: '_md-panel-animate-enter _md-panel-animate-leave'
};

var closeSlide = animator.calculateSlideToOrigin(
panelEl, this._closeTo) || '';
var closeSlide = animator.calculateSlideToOrigin(panelEl, this._closeTo) || '';
closeTo = animator.toTransformCss(closeSlide + ' ' + panelTransform);
break;

Expand All @@ -3402,8 +3401,7 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) {
transitionOutClass: '_md-panel-animate-scale-out _md-panel-animate-enter _md-panel-animate-leave'
};

var closeScale = animator.calculateZoomToOrigin(
panelEl, this._closeTo) || '';
var closeScale = animator.calculateZoomToOrigin(panelEl, this._closeTo) || '';
closeTo = animator.toTransformCss(panelTransform + ' ' + closeScale);
break;

Expand Down Expand Up @@ -3492,9 +3490,9 @@ function getElement(el) {

/**
* Gets the computed values for an element's translateX and translateY in px.
* @param {!JQLite|!Element} el
* @param {!JQLite|!Element} el the element to evaluate
* @param {string} property
* @return {{x: number, y: number}}
* @return {{x: number, y: number}} an element's translateX and translateY in px
*/
function getComputedTranslations(el, property) {
// The transform being returned by `getComputedStyle` is in the format:
Expand Down
6 changes: 5 additions & 1 deletion src/core/util/animation/animate.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {
duration: options.duration
})
.start()
.then(function(){
.then(function() {
// Resolve with reverser function...
return reverseTranslate;
});
Expand Down Expand Up @@ -199,6 +199,10 @@ function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {

/**
* Convert the translate CSS value to key/value pair(s).
* @param {string} transform
* @param {boolean=} addTransition
* @param {string=} transition
* @return {Object} object containing CSS translate key/value pair(s)
*/
toTransformCss: function (transform, addTransition, transition) {
var css = {};
Expand Down
8 changes: 8 additions & 0 deletions src/core/util/constant.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ function MdConstantFactory() {
var isWebkit = /webkit/i.test(vendorPrefix);
var SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;

/**
* @param {string} name CSS property name
* @return {string} the property name supported by the browser
*/
function vendorProperty(name) {
// Add a dash between the prefix and name, to be able to transform the string into camelcase.
var prefixedName = vendorPrefix + '-' + name;
Expand All @@ -27,6 +31,10 @@ function MdConstantFactory() {
return angular.isDefined(testElement.style[property]);
}

/**
* @param {!string} input value to convert to camelCase
* @return {string} camelCased version of the input string
*/
function camelCase(input) {
return input.replace(SPECIAL_CHARS_REGEXP, function(matches, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
Expand Down