How to add a ternary operator in css in js with react spring

Question

I want my page transition to happen conditionally based on screen size. I don't want the animation to happen on small screens. This is what I've written:

const mq = window.matchMedia( "(min-width: 600px)" )

  const transitions = useTransition(location, location => location.pathname, {
    from: {{mq ? transform: "translateX(100%)" : transform: "translateX(0)"}, position:'absolute', width: '100vw', opacity: 0},
    enter: {opacity: 1, width: '100vw', transform: "translateX(0)"},
    leave: {opacity: 0, transform: "translateX(-50%)"}
  })

I've tried different variations of this but it doesn't work.

whoops, that was a copy paste mistake. I edited the code. This is the syntax on my editor, which still gives me an error — jibaro, Jun 12 '20 at 19:06

score 1 · Answer 1 · answered Jun 12 '20 at 19:11

1

You were close. The property's key and value are technically expressions, so with that in mind you can have the ternary expression as the value. Having the whole thing as such is not valid syntax.

transform: mq? "translateX(100%)": "translateX(0)"

answered Jun 12 '20 at 19:11

Jonathan Rosa

992
7
22

3

Even tidier - `transform: `translateX(${mq ? '100%' : '0'})` – larz Jun 12 '20 at 19:13

How to add a ternary operator in css in js with react spring

1 Answers1