Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fx_methods show() and hide() add unnecessary CSS properties on non-animated DOM nodes #445

Open
pamelafox opened this issue Mar 19, 2012 · 6 comments
Assignees
Milestone

Comments

@pamelafox
Copy link
Contributor

When you add fx_methods to your Zepto, the show() and hide() methods are overriden with methods that also call animate. Even in the case of undefined speed (normal show), animate still adds many CSS properties to the shown/hidden notes, e.g.:
display: block; -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; opacity: 1; -webkit-transform: scale3d(1, 1, 1); -webkit-animation-name: none; -webkit-transition-property: none; -webkit-transition-duration: initial; -webkit-transition-timing-function: initial; -webkit-transition-delay: initial;

These unexpected CSS rules can interfere with the page CSS (in my case, it has changed the positioning of my child fixed DIVs).

The equivalent jQuery methods do not call animate in the case of undefined speed, so I am currently experimenting with this change to the code:

  $.fn.show = function(speed, callback) {
    if (speed || speed === 0) {
      this.css('opacity', 0);
      return anim(this, speed, 1, '1,1', callback);
    } else {
      return origShow.call(this);
    }
  };

  $.fn.hide = function(speed, callback) {
    if (speed || speed === 0) {
      return hide(this, speed, '0,0', callback);
    } else {
      return origHide.call(this);
    }
  }
@mislav
Copy link
Collaborator

mislav commented Mar 19, 2012

I agree that, if there's no animation, there should be no changes to styles of the element.

@pamelafox
Copy link
Contributor Author

Also: The current fx_methods.js show/hide code changes the opacity in the case of a normal show() - I had a div with opacity set at .7, and it was re-set to 1.0 after the show().

I don't think my code is quite correct though.

@Grsmto
Copy link

Grsmto commented May 30, 2013

Up for this. Zepto should not change anything else than display property. At the moment it breaks all css transitions applied to the element you want to show/hide.

@acemir
Copy link

acemir commented Oct 17, 2013

Up for this. (2)

Same thing here! The 'transform' property realy cancels the 'fixed' positioned child elements, and for the 'absolute' positioned child elements, it acts like a 'relative' positioned element, preventing them to position themselves relative to their parent elements.

My suggested solution is this:

function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

function show(el, speed, scale, callback) {
  origShow.call(el)
  return anim(el, speed, 1, scale, callback)
}

$.fn.show = function(speed, callback) {
  return (speed === undefined) ? origShow.call(this) : show(this, speed, '1,1', callback)
}

$.fn.hide = function(speed, callback) {
  return (speed === undefined) ? origHide.call(this) : hide(this, speed, '0,0', callback)
}

Thus, by calling methods show() or hide() without the speed parameter setted, we exchanged only the 'display' property, and when the parameter is set, the event continues to be called the classic effect of element scale.

@madrobby
Copy link
Owner

This breaks show with no speed given after a hide with an animation speed.

Perhaps the code could temporarily store the original opacity value before an animated hide, so that show can apply the correct value if no speed is given?

Any takers to implement this? If so, a unit test for fx_methods would be most welcome.

@ghost ghost assigned madrobby Nov 24, 2013
@swordray
Copy link

swordray commented Oct 6, 2015

The show without speed should not set opacity 1.0 to element.

@madrobby madrobby modified the milestones: v1.2, v2.x Aug 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants