如何在 React 样式组件关键帧中使用媒体查询？

Question

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe中使用它时（通过从styled-components导入），它似乎根本不起作用。

试图让一个 div 动画到特定的 position，但是当 window < 800px 时，让 position 改变，我试过这个：

import styled, { keyframes } from 'styled-components';

// ... further down ...

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;
  }

  @media (max-width: 800px) {
    top: 70px;
    left: 50px;
    }

`;

我还尝试将媒体查询放在100%块中：

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;

    @media (max-width: 800px) {
       top: 70px;
       left: 50px;
    }
  }
`;

我对我想要实现的目标进行了有用的交互式演示（问题代码在第 24 行）： https://codesandbox.io/embed/fragrant-star-m71ct

如果需要，请随意从 800 更改breakpoint变量。

任何帮助表示赞赏！

Answer 1

您可以采用不同的方法，将keyframes动画定义为如下函数：

const slideAnim = (top, left) => keyframes`
  100% {
    top: ${ top };
    left: ${ left };
  }  
`;

该函数接受输入参数，这些参数指定动画最终关键帧的top和left的目标坐标。

在您的 stlyed 组件（即Box1 ）中，然后您将使用特定坐标调用slideAnim()到每个断点，以实现每个断点的不同动画行为：

/*
Declare responsive styling in the Box1 component, where destination
coordinates are specified for the animate on a per-breakpoint-basis
*/
const Box1 = styled.div`
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  left: -100px;
  top: 80px;

  &.slide {

    animation: ${slideAnim('20px', '30px')} 0.4s ease-in-out forwards;

    @media (max-width: ${breakpoint}px) {
      animation: ${slideAnim('70px', '50px')} 0.4s ease-in-out forwards;
    }    
  }
`;

总之，我们的想法是将响应式样式转移到您的样式组件（即Box1 ）中，同时定义一个可重用的函数，其中包含每个响应断点的公共/共享keyframes 。

这是一个工作示例- 希望有帮助！

Answer 2

在所有块之外使用关键帧。 例如：

import { IconButton} from "@material-ui/core"; 
const CloseButton = styled(IconButton)`
  padding: 3px !important;
  outline: none;


  @media only screen and (min-width: 728px) {
    padding: 4px !important;
    margin:0
  }
`;

Answer 3

一种更发达的方法来使用带有样式组件的媒体查询

首先我们定义每个设备的屏幕尺寸：

const size = {
  mobile: "320px",
  tablet: "768px",
  laptop: "1024px",
  desktop: "2560px",
}

然后我们使用从styled-components导入的css来解决每个设备相关常量中的媒体查询

export const mobile = (inner) => css`
  @media (max-width: ${size.mobile}) {
    ${inner};
  }
`;
export const tablet= (inner) => css`
  @media (max-width: ${size.tablet}) {
    ${inner};
  }
`;
export const desktop= (inner) => css`
  @media (max-width: ${size.desktop}) {
    ${inner};
  }
`;
export const laptop= (inner) => css`
  @media (max-width: ${size.laptop}) {
    ${inner};
  }
`;

现在假设您正在创建一个样式化的 div，并且您想使用媒体查询它。 并根据接受的答案使用关键帧

const slideAnim = (top, left) => keyframes`
  100% {
    top: ${ top };
    left: ${ left };
  }  
`;
const StyledDiv= styled.div`

 /* ...css */

    animation: ${slideAnim('20px', '30px')} 0.4s ease-in-out forwards;

   ${mobile(css`
     width:300px;
     animation: ${slideAnim('10px', '20px')} 0.1s ease-in-out forwards;
      /* ...css */
   `)};

   ${tablet(css`
     width:500px;
      /* ...css */
   `)};

    /*... and so on */
`;