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.

Sign up for GitHub

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

Make sure the content parent element is set before animating out #639

Merged
merged 1 commit into from
Feb 4, 2022
Merged

Make sure the content parent element is set before animating out #639

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions addon/components/basic-dropdown-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class BasicDropdownContent extends Component<Args> {
private handleRootMouseDown?: RootMouseDownHandler;
private scrollableAncestors: Element[] = [];
private mutationObserver?: MutationObserver;
@tracked animationClass = this.transitioningInClass
@tracked animationClass = this.transitioningInClass;

get destinationElement(): Element | null {
return document.getElementById(this.args.destination);
Expand Down Expand Up @@ -149,7 +149,8 @@ export default class BasicDropdownContent extends Component<Args> {
@action
animateOut(dropdownElement: Element): void {
if (!this.animationEnabled) return;
let parentElement = dropdownElement.parentElement;
let parentElement =
dropdownElement.parentElement ?? this.destinationElement;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is causing a weird double animate out in my app

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello, thanks for the feedback @hoIIer, I can have a look, but could you please be more specific on your context, like:

  • Browser + OS (Does the animation on the docs behaves normally on your browser ?)
  • Animation css you're using
  • renderInPlace or not
  • ...

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoIIer Also interested, It didn't cause any problem on mine.

Copy link

@erichaus erichaus Feb 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • happens in both chrome/firefox latest in osx
  • using custom calculated position that sets css animation dynamically
  • not using renderInPlace

e.g. output of this.calcPosition

animation: "popoutFadeInSlideLeft 0.1s ease-in-out"
right: 709.5
top: 433.1796875

  @keyframes popoutFadeInSlideLeft {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }

When I remove the style.animation = ... the popout looks normal

<BasicDropdown
  @calculatePosition={{this.calcPosition}}
  as |dd|
>
  {{yield (hash
    dd=dd
    trigger=(
      component 'popout-menu/trigger'
      componentStyle=(get-style this)
      disableMenu=@disableMenu
      dropdown=dd
      name=@name
      visible=@visible
    )
    menu=(
      component 'popout-menu/menu'
      componentStyle=(get-style this)
      dropdown=dd
      onClickOverlay=this.onClickOverlay
      theme=@theme
    )
    componentStyle=(get-style this)
  )}}
</BasicDropdown>

Copy link

@erichaus erichaus Feb 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I extended the animation duration to 10 seconds and noticed when closing the dropdown, the content menu is immediately reset to it's starting position, but it still has the animation value set so it does a 2nd animation in before closing.

Tried unsetting it with --transitioning-out but it seemed to have no effect.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed that in 4.0.2 the content menu does not reset to original position after clicking out to close the dropdown, the <div id="ember-basic-dropdown-wormhole"></div> just becomes empty again.

In 4.0.3 when clicking out to close the dropdown, the content menu appears again inside the parent container and with a --clone css class, leading to the 2nd animation before it's removed entirely.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can revisit later today, perhaps I need to adjust how I'm setting the animation? In this case I have to set it dynamically within the calcPosition function because my contextual dropdown is used in different contexts.

if (parentElement === null) return;
if (this.args.renderInPlace) {
parentElement = parentElement.parentElement;
Expand All @@ -161,7 +162,7 @@ export default class BasicDropdownContent extends Component<Args> {
clone.classList.add(...this.transitioningOutClass.split(' '));
parentElement.appendChild(clone);
this.animationClass = this.transitioningInClass;
waitForAnimations(clone, function() {
waitForAnimations(clone, function () {
(parentElement as HTMLElement).removeChild(clone);
});
}
Expand Down