javascript - 如何在js中的css中使用react spring添加三元运算符

Question

我希望我的页面转换根据屏幕大小有条件地发生。我不希望动画发生在小屏幕上。这是我写的：

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%)"}
  })

我尝试了不同的变体，但它不起作用。

Answer 1

你很亲密。属性的键和值在技术上是表达式，因此考虑到这一点，您可以将三元表达式作为值。拥有整个事物本身不是有效的语法。

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