Replace css animation with js animation

[brianvoe]

Currently I have to do setTimeout to delay to wait for the css animation to complete and this makes it tough on others who want to change that animation duration.

I suggest replacing any css animation with js. This will allow better settings flexibility for things like testing where people find it better to not have animation delay. Or just dont want animation at all.

[brianvoe]

#359

[coolibry]

hello,

i make demo to show there is something to remove before make anything:
https://jsfiddle.net/b16qd7w0/

with Firefox browser problem is shown easier,
to make testing :
select 10x element to 20x at multiple select,
open alternatively single select and multiple select

Solution to recover speed as slimselect 1.27 and extra fix :

1. events afterChange trigger 2x times :
   first when this.callbacks.setSelected
   and just after afterChange is run
   then in render.ts comment this line :

292:          this.callbacks.afterChange(after)
558:            this.callbacks.afterChange(after)
1250:          this.callbacks.afterChange(after)

2. renderOptions is trigger foreach open select, in render.ts comment this line :
   160: this.renderOptions(this.store.getData())

3. in render.ts line 209 to 213 :

main.onfocus = () => {
      if (this.settings.triggerFocus) {
        this.callbacks.open()
      }
    }

this cause bug when slim is selected > change tab > return to tab,
minimally add option to disable this.

4. in render.ts comment line 338 and 339 solve bug timeoutDelay broken with v2.0.0 #359 that select open and close immediately:

this.main.main.focus({ preventScroll: true });
this.settings.triggerFocus = true;

5. in select.ts id of original select is replaced to generated id, in select.ts at line 246 i replaced to this :
   this.select.dataset.ssid = id;

6. instead of renderOption complete list after select or deselect,
   update css class on selected value

after this you can check if setTimeout is needed

[brianvoe]

I think i follow you on a few of these. I have noticed i need to address multiple afterChange calls and a few other things. I cant tackle this today, but if you can submit a pr i can take a look at it tomorrow and test everything.

[coolibry]

thanks for version V2.3.1,
this is a great improvement for reactivity,
from my demo, when open select, you can see in console that open() is trigger 2 or 3 times.
best this need to trigger only 1x time.

[brianvoe]

Yep i do see that. If you already found the spot your more then welcome to do a pr. Otherwise Ill try to get to it in the next few days.

[coolibry]

spot is found at render.ts :

line 225 = main.onfocus
line 258 = main.onclick
line 701 = input.onfocus

this 3x event trigger at the same time open() when clic on select,
i prefer you solve this issue.

[brianvoe]

Totally fine. I think I am going to try out debouncing the event callback. Instead of trying to pinpoint where to allow the callback.

[marko-hologram]

Currently I have to do setTimeout to delay to wait for the css animation to complete and this makes it tough on others who want to change that animation duration.

Can a transitionend or animationend event be used for that purpose instead of trying to have perfect timeouts?
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event

[brianvoe]

I honestly might have to change it all to js animations but who knows when ill be able to do that

[Sempervivum]

First of all: I like this script very much. Used Select2 and Selectize before but the events and methods of Slim Selects are much better and made it easy to code what I needed.

I agree with @marko-hologram : End of transition can be detected easily by adding an eventlistener. I gave it a try and this works fine:

            document.querySelector('.ss-content').addEventListener('transitionend', event => {
                console.log('transitionend fired');
            });

[brianvoe]

im open to pr's if you want to submit something.