I am trying to implement a comment section in my project. Each comment has its own quill editor to answer. The reason behind this on my mobile version I want to display the quill editor fixed to the bottom and on my desktop version I want to display a quill editor right below the comment which the user wants to answer.
However, I am facing one problem with my transition. When you press the comment answer button, you can see how the quill editor pops up from the bottom. When you press anywhere on the screen (except another comment answer button), the editor slides and fades out again.
However, when I press another comment answer button, you can already see the problem. One editor slides and fades out, and the editor of the comment where you pressed the comment answer button slides and fades in. This is what I am trying to solve here.
I need to control the slide-fade in and slide-fade out independently of each other in order to have no slide-fade out animation for the present editor and no slide-fade in animation for the editor of the comment where I pressed the answer button.
When the user clicks somewhere else, the animation should be as usual.
Here is a working example: click!
I appreciate any kind of help!
Kind regards