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

Some weird animation behaviour of Radio group and Switch occur in Popover #12942

Closed
NevenLeung opened this Issue Nov 3, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@NevenLeung

NevenLeung commented Nov 3, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.10.3

Environment

"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Click the radio button quickly.

After that, you can see the animation will show on every button you just clicked including the switch component.

If you wait few seconds to click the button, you may still see only one button show the animation you clicked before.

The Gif for this issue:
antd-animation

What is expected?

Show the animation correctly .

What is actually happening?

One click, every button show animation.


Using the radio group and switch together at the popover outside works fine.

I have found if the handler of radio group contains the this.setState(), the animation problem will occur.

Hope this clue will help you to fix it.

@zy410419243

This comment has been minimized.

Collaborator

zy410419243 commented Nov 4, 2018

For easier to read, I rewrite the demo of this.

When render PopoverContent in App directly, it would show animation correctly, as below,

render() {
  return (
    <PopoverContent
      toggleScrollSync={this.onScrollSyncChange}
      toggleDisplayMode={this.onDisplayModeChange}
    />
  );
 }

So maybe there is something wrong with trigger. To know more, I must learn how it works, and it may take for a long time.

If anyone would like to take this issue, maybe check what's wrong with trigger is a good choice.

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 5, 2018

Looks like re-render will makes Wave animation re-play. Still checking...
kapture 2018-11-05 at 22 58 40

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 5, 2018

Catch it! forcePopupAlign in rc-tooltip makes the browser reflow which reset the animation. Later for patching...

@zombieJ zombieJ closed this in 4c5e349 Nov 6, 2018

@afc163 afc163 reopened this Nov 8, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Nov 8, 2018

1

This problem still exists in popconfirm demo.

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 10, 2018

This problem still exists in popconfirm demo.

Hmmm, popup will trigger re-align...

@zombieJ

This comment has been minimized.

Member

zombieJ commented Nov 10, 2018

Find some way, let me test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment