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

The resize-observer-polyfill plugin is able to add support for listening to css3 "animation" to change element size? #60

Open
wuwhs opened this issue Jul 25, 2019 · 2 comments

Comments

@wuwhs
Copy link

wuwhs commented Jul 25, 2019

Hi,
First of all, thanks for the excellent plugin,I have applied it to my project.In your code,you use "transitionend" to listen for "CSS transition", which causes the size of the element to change, but "animation" may also cause element changes.

  // Subscription to the "Transitionend" event is used as a workaround for
  // delayed transitions. This way it's possible to capture at least the
  // final state of an element.
  document.addEventListener('transitionend', this.onTransitionEnd_);
  window.addEventListener('resize', this.refresh);

For example the following example

There is a element which use css3 animation in my container,

  #tar {
      width: 200px;
      height: 200px;
      background-color: aqua;
      border: 1px solid #ccc;
      animation: changeheight 2s ease-in 1s infinite;
    }

    @keyframes changeheight {
      0% {
        height: 300px;
      }
      50% {
        height: 200px;
      }
      100% {
        height: 300px;
      }
    }

when the inner element height change,then need to update the height of the outer 'iscroll' container, and call the refresh() method.resize-observer-polyfill plugin can't cover this situation.
Wish you reply yet,thanks!

@trusktr
Copy link

trusktr commented Jun 6, 2020

Do browsers have yet an event to listen to in the middle of a transition? If so we can update the polyfill to use that. If not, maybe we can run a requestAnimationFrame loop while a transition is running and poll the element size using that.

@wuwhs
Copy link
Author

wuwhs commented Jun 18, 2020

Do browsers have yet an event to listen to in the middle of a transition? If so we can update the polyfill to use that. If not, maybe we can run a requestAnimationFrame loop while a transition is running and poll the element size using that.

I mean maybe we can perform a height/width change by listening to the DOM element animationend event

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants