css - react JS : How to use responsive styles with react-spring

Question

我是用 Gatsby 和 React JS 构建网站的新手。

问题

我想基于css做一个简单的动画transform属性使用 react-spring .
当我使用时 styled-components (使用 theme.js 文件)，我希望动画根据断点做出响应。

问题是react-spring不会接受数组，而只接受字符串，例如“10 像素”。

✅ 响应式样式 react-components

假设我有以下定义

const MyDiv = styled(animated.div)`
  height: 100px;
  ${width}
`;

并简单地调用元素

<MyDiv width={[50, 70]} />

因为我已经在我的 theme.js 中实现了断点文件，这完美地工作(使用来自样式组件的 ThemeProvider)。

✅ 按钮动画

让我们定义 Spring 动画如下:

const [showButton, setShowButton] = useState(false);
const clickState = useSpring({
  oi: showButton ? 0 : 1,
});
const divAnimation = {
  transform: clickState.oi.interpolate(oi => `translateX(${oi * 50}px)`),
};

并将其称为

<Button onClick={setShowButton(!showButton)}>
  <MyDiv style={{ ...divAnimation }} />
</Button>

❌ 响应式和动画

正如上面间接提到的，我想根据窗口宽度有一个略有不同的动画。所以，我想出了一些如何实现的想法，但没有一个可行。

必须是动画 divAnimation的可能性以不同的方式移动 div。或不..？

在此先感谢您的帮助。

亲切的问候

.

.

.

后脚本:该代码的依赖关系

import React, { useState } from 'react';
import styled from 'styled-components';
import { width } from 'styled-system';
import { animated } from 'react-spring';¨
import { Button } from 'rebass';

Answer 1

使用 window.matchMedia在 JavaScript 中调用媒体查询，然后相应地更改 spring 的输入。
作为自定义钩子(Hook)的示例实现:

const useMediaQuery = (minWidth: number) => {
  const [matches, setMatches] = useState(true);

  useEffect(() => {
    const mediaQuery = window.matchMedia(
      `screen and (min-width: ${minWidth}px)`
    );
    const listener = (ev) => {
      setMatches(ev.matches);
    };
    mediaQuery.addEventListener("change", listener);

    return () => {
      mediaQuery.removeEventListener("change", listener);
    };
  }, []);

  return matches;
};