Animating ngx-contextmenu open event

[EduardsE]

Has anyone figured out how to animate the opening event? Couldn't find any documentation or issues on the topic.

[isaacplmann]

I've never thought about that. Good question.

This article has some information: https://blog.thoughtram.io/angular/2017/11/27/custom-overlays-with-angulars-cdk-part-two.html#animating-the-overlay

But I don't think you can actually implement that because you don't have control over the whole template of the context menu. You would need the refactoring that I just talked about in issue #140 .

If you come up with a workaround that I haven't thought of, please let me know.

[EduardsE]

We're kinda rushing to deploy our project, so animating the menu is not amongst our priorities. Thanks for the reply tho. Will post here, if I eventually find a solution.

[tiagoboeing]

You can use only CSS for this:

  .ngx-contextmenu {
    animation: fadein 100ms forwards cubic-bezier(0.24, 0.93, 0.78, 0.79);
  }

  @keyframes fadein {
    0% {
      transform-origin: top left;
      opacity: 0;
      width: 0;
      height: 0;
      transform: scale(0.4);
    }
    75% {
      width: 150px;
    }
    to {
      width: 240px;
      height: unset;
      opacity: 1;
      transform: scale(1);
    }
  }

forwards in animation property define for preserve the end state of animation.