Recalculate widths without changing inline css transition duration

[SorinGFS]

Recalculate widths without changing inline css transition duration

[loup-brun]

code example, like codepen or jsbin? (to see what you are doing “with javascript”)

[SorinGFS]

code example, like codepen or jsbin? (to see what you are doing “with javascript”)

It is hard to replicate the issue in codepen or jsfiddle for such a simple problem.

This is what we get in dev tools after the page is loaded.

<section class="swipe" style="visibility: visible;">
    <div class="swipe-wrap" style="width: 9457.8px;">
        <div style="width: 1576.3px; left: 0px; transition-duration: 0ms; transform: translateX(-1576.3px);" data-index="0">prev</div>
        <div style="width: 1576.3px; left: -1576.3px; transition-duration: 250ms; transform: translateX(0px);" data-index="1">active</div>
        <div style="width: 1576.3px; left: -3152.6px; transition-duration: 250ms; transform: translateX(1576.3px);" data-index="2" class="">next</div>
    </div>
</section>

As code shows, we have inline width set to whatever SwipeJs was calculating on initial setup. We also have those transition-duration which are changing as you swipe.

The issue comes into play when the width of the parent container is changed using javascript by adding some css class that changes lateral padding or lateral margins or width.

This problem could be easily solved by a slider.setup() which recalculates the widths, but this method aslo resets those transition-duration's to zero, which in my case creates a glitch on screen, so I cant use it as it is. I need a method that does exactly the same as setup() method, but without touching existing transition-duration's.

PS - It would be even nicer if SwipeJs would observe that the width in which it seats was chenged and to recalculate the widths automatically. SwipeJs already does recalculate widths on resize event, but the parent element's width can be changed in various forms: by animate padding or margins, or by adding extra elements inside it.

[loup-brun]

I understand better now.

When I run slidre.setup(), I also observe the transition-duration set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).

[SorinGFS]

I understand better now.

When I run slidre.setup(), I also observe the transition-duration set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).

Reseting the transition-duration to zero means instant change on screen, but on the page you may have elements with some kind of transition, animation, and the result will be the following: all emelemts changes smoothly, except the sliders!

[SorinGFS]

I understand better now.

When I run slidre.setup(), I also observe the transition-duration set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).

In my case I have sidebars under-covered by padding, and the padding is opening with exactly the same transition duration as in sliders, So the result shoud be: as sidebar grows, sliders shrink with same speed. I used to add padding directly inside swipe-wrap > div's but there is another issue: as number of slides increases ... performance speed goes down!

So, after all I came with that solution above, which is the only solution possible since SwipeJs puts the transition-duration inline. I don't know any other method capable to run before SwipeJs puts that transition-duration inline. Ofc, there is the possibility to write a method myself directly in the SwipeJs library and to import that modified library, but as a principle I stick to original libraries to preserve the ability to update.

[SorinGFS]

I understand better now.

When I run slidre.setup(), I also observe the transition-duration set to zero; however, Swipe dynamically adds the duration on slide change, so the end result works the same (at least for what I've tested).

After some more tests I understand even better why SwipeJs can't solve this issue without a major change since the width recalculation moment is the moment when setup() is called! This means the following: the container should be already in the final position because another recalculation won't be done! This is why as it is SwipeJs won't change that transition-duration: 0s. It needs a modern aproach instead of that recalculation on resize event to put an Resize Observer, but for now it's browser support is stil low...
https://caniuse.com/#search=Resize%20Observer

[loup-brun]

Okay, well, closing since you understand your issue.
Best to use simple rather than complicated solutions!

[SorinGFS]

Okay, well, closing since you understand your issue.
Best to use simple rather than complicated solutions!

True.

[SorinGFS]

For the peaple facing the same issue the solution is to call slider.setup() in a setTimeout loop, like this:

    let periods = Math.round(whateverTransitionDurationIs / 17, 0);
    for (let i = 0; i < periods; i++) {
        setTimeout(() => {
            slider.setup();
        }, (i + 1) * 17); // one per frame
    }