React :如何使用响应样式

Question

我是新建网站与盖茨比，因此反应JS。

问题

我想做一个简单的动画基于css transform属性使用react-spring。在使用styled-components (与theme.js文件一起使用)时，我希望动画能够响应，具体取决于断点。

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

使用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的可能性。还是不..？

提前谢谢你的帮助。

亲切的问候

。

。

。

post :该代码的依赖关系

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中的媒体查询，然后相应地更改春季的输入。

作为自定义钩子的示例实现：

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;
};