Animations, keyframes, and is:()

[BMCwebdev]

I'm trying to add some animations that change depending on a data attribute. Is there any reason why this might not work in conjunction with the side-stepping is:() method? Thanks!

const slideUp = stylex.keyframes({
  from: {
    transform: 'translateY(100%)',
    opacity: 0
  },
  to: {
    transform: 'translateY(0)',
    opacity: 1
  }
});
const slideOut = stylex.keyframes({
  from: {
    transform: 'translateY(0)',
    opacity: 1
  },
  to: {
    transform: 'translateY(100%)',
    opacity: 0
  }
});
const fadeIn = stylex.keyframes({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
});

const toastStyle = stylex.create({
  base: {
    animationName: {
      ':is([data-animation="entering"])': slideUp,
      ':is([data-animation="exiting"])': slideOut,
      ':is([data-animation="queued"])': fadeIn
    },
    animationDuration: {
      ':is([data-animation="entering"])': '0.5s',
      ':is([data-animation="exiting"])': '0.5s',
      ':is([data-animation="queued"])': '0.3s'
    },
    animationFillMode: {
      ':is([data-animation="entering"])': 'both',
      ':is([data-animation="exiting"])': 'both',
      ':is([data-animation="queued"])': 'both'
    }
  },
});

[BMCwebdev]

It does work, I had an error elsewhere.

[nmn]

While what you have works, you may see issues with the tooling if you skip the default key. It is required.

[BMCwebdev]

Ooh, good to know! Is null fine to use as default?

welcome back by the way! Great talk at react conf (watched online).

[nmn]

Is null fine to use as default?

Yup!