Failed to execute 'animate' on 'Element': Partial keyframes are not supported

[NeXTs]

Description

Several users on my site have caught these errors (tracked by sentry).

Failed to execute 'animate' on 'Element': Partial keyframes are not supported, here

on this Environment

• Huawei POT-LX1, Android 10
• Chrome Mobile 83.0.4103
• 4.0.5

---

u().animate is not a function. (In 'u().animate([{transform:l+"("+f+")",opacity:0},{transform:l+"(0)",opacity:1}],h)', 'u().animate' is undefined), here this one was minified, sorry. issue looks similar, but on iOS

on this Environment

• iOS 13.3.1
• Mobile Safari 13.0.5
• 4.0.5

Additional information

I was not able to reproduce them.

• [ ] I can fix this bug

[LouisBarranqueiro]

👋 @NeXTs, Unfortunately, I won't provide a fix for this issue because these browsers are not supported. However, if you want to provide a fix and a way for me to test it, I will accept the contribution. 🙂

[NeXTs]

Understandable 😄

[NeXTs]

@LouisBarranqueiro Hello, I just realised that it's not necessary to implement animation for old browsers, it just should not crash the page. Appearing and disappearing may be instant, by setting style properties. How do you like this idea?

Example of this function

const onEnter = () => {
    const elem = getNode();
    const finalStyles = {
        transform: `${transformDirection}(0)`,
        opacity: 1
    }

    const animateSupported = "animate" in elem;
    if (!animateSupported) {
        for (const prop in finalStyles) {
            elem.style[prop] = finalStyles[prop];
        }
        return;
    }

    elem.animate(
        [
            {transform: `${transformDirection}(${transformValue})`, opacity: 0},
            finalStyles,
        ],
        animationProps
    )
}

[NeXTs]

ok nvm, we've customized Transition component