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

Add -done class names #269

Merged
merged 3 commits into from
Jan 9, 2018
Merged

Add -done class names #269

merged 3 commits into from
Jan 9, 2018

Conversation

GMchris
Copy link
Contributor

@GMchris GMchris commented Dec 22, 2017

New "Done" states as discussed here.

Before this change there was no way to persist the styles that have been transitioned to, without fiddling with the callbacks. Now users can define #{transition-name}-done classes or custom ones to denote the transition as being done and keep the element in the new state or set other styles for it.

Here's a small Sass mixin that generates css compliant with this change.

@taion
Copy link
Member

taion commented Dec 22, 2017

Trivial question, but enterDone/exitDone v entered/exited?

@jquense
Copy link
Collaborator

jquense commented Dec 22, 2017

Done is more in keeping with the existing verbage of the CSSTransition, e.g. enter enter-active enter-done, vs enter, enter-active, entered

we may want to change it tho to match Transition at somepoint

@GMchris
Copy link
Contributor Author

GMchris commented Jan 9, 2018

Hey, just wanted to check if there's something you think needs to be changed to merge these changes. Have you decided on 'done' vs 'entered' for instance?

@jquense
Copy link
Collaborator

jquense commented Jan 9, 2018

looks good can you update the doc comments to explain the new classes? thanks

@jquense
Copy link
Collaborator

jquense commented Jan 9, 2018

thanks!

@jquense jquense merged commit c27040c into reactjs:master Jan 9, 2018
@guidobouman
Copy link

@jquense When is this getting released? I'm currently getting bitten by this.

We can only use class names because we're using CSSTransition in combination with Glamorous. The class names that I pass along to CSSTransition have a lower specificity than the default styling which also uses classes...

@RanzQ
Copy link

RanzQ commented Jan 30, 2018

Anyone knows a workaround to set a base className when there's no transition in progress, until this is released? Only way I found is to use a wrapper element just for the transition.

@studious
Copy link

@RanzQ I use a default class to start with. I then set my own done classname using onEntered and onExited webhooks.

const Example = ({isSelected, children}) => {
  const onEntered = node => {
    node.className = 'example-selected';
  };
  const onExited = node => {
    node.className = 'example';
  };

  return (
    <CSSTransition
      in={isSelected}
      appear={true}
      timeout={1000}
      classNames="example"
      onEntered={onEntered}
      onExited={onExited}
      >{children}</CSSTransition>
  )
};

@oliverwoodings
Copy link

Is there any news on when this is going to be released?

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

Successfully merging this pull request may close these issues.

7 participants