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

How to reset styles in onTransitionEnd? #2

Open
leolux opened this issue Oct 22, 2019 · 2 comments
Open

How to reset styles in onTransitionEnd? #2

leolux opened this issue Oct 22, 2019 · 2 comments

Comments

@leolux
Copy link

leolux commented Oct 22, 2019

The method transition.begin(....) adds some styles to the DOM element. How to remove those styles at the end of the transition?

@smnh
Copy link
Owner

smnh commented Oct 23, 2019

@leolux you can use the onTransitionEnd callback function to clean the styles.
But it might undo the transition effect. For example, if you transition element's opacity from 1 to 0 and then clean its styles, then the element will jump to its default opacity of 1.

transition.begin(element, "opacity 1 0 1s", {
  onTransitionEnd: function(element, finished) {
    if (finished) {
      // here we remove the style, and the element will instantly appear again.
      element.style.cssText = "";
    }
  }
});

@leolux
Copy link
Author

leolux commented Nov 1, 2019

Yes, the element should jump to its default style after the transition has finished. But I can't simply remove all styles in onTransitionEnd because my element already has some initial style which gets overwritten during the transition process.

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