Awaiting feedback CSS animations don't start from/end at 0 height

[DragonByte Tech]

Affected version

2.3.0b3

When using XF.Animate.slideDown() and XF.Animate.slideUp() as replacements for jQuery.slideDown() and jQuery.slideUp(), you experience stilted animations.

XF.Animate.slideDown():
View attachment Screen Recording 2024-04-09 at 21.54.45.mov


XF.Animate.slideUp():
View attachment Screen Recording 2024-04-09 at 21.55.15.mov


Relevant JS code:

for (let key in data.items)
{
    let item = data.items[key];

    XF.setupHtmlInsert(item, ($html, container, onComplete) =>
    {
        let self = this;
        $html.style.display = 'none';

        this.$container.insertBefore($html, this.$container.firstChild);
        XF.Animate.slideDown($html, {
            speed: (this.options.refreshDelay * 1000) / 2,
            complete ()
            {
                self.$container
                    .querySelectorAll('li:nth-child(n+' + (self.options.maxResults - 1) + ')')
                    .forEach($el => {
                        XF.Animate.slideUp($el, {
                            speed: (self.options.refreshDelay * 1000) / 2,
                            complete ()
                            {
                                $el.remove();
                            }
                        })
                    })
                ;

            },
        })

        XF.layoutChange();
    });
}

 

[joelessan]

I'm encountering this issue as well. It seems like the animations using XF.Animate.slideDown() and XF.Animate.slideUp() aren't as smooth as expected. Have you tried adjusting the animation parameters or exploring alternative animation methods within XF?

 

[Jeremy P]

Do the elements have any CSS height rules set? I'm not seeing this behavior locally, even when slowing down animations a lot and pausing in between each step. For XF.Animate.slideDown, does adding el.style.height = 0 below line 4472 of js/xf/core.js help? And can you reproduce this in the core anywhere?