React js 中 lottie 动画的屏幕大小调整

Question

我在一个网站上工作，该网站的登录页面上有一个 lottie 动画，我该如何调整 lottie 组件的大小，以便在移动设备上将显示设置为 none。

下面的lottie组件

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";

export default function App() {
  const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
  preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
<div id="lottie">
  <Lottie
    options={defaultOptions}
    height={800}
    width={1000}
    style={{
      top: "30%",
      right: "10%",
      zIndex: -1,
      overflow: "hidden",
      position: "fixed",
    }}
  />
</div>
  );
}

这是主页组件。

import Lottie from "../Components/Lottie";
import React from "react";

function Landing () => {
  let width = window.innerWidth;
  if (width > 600px) {
console.log(width);
  } else {
document.getElementById("lottie").style.display = "none";
   }
  <Lottie className="col-lg-8 col-sm-12 lottie d-none" />
}

export default Landing;

我也试过使用外部 CSS

@media screen and (max-width: 600px) {
  .lottie {
display: none !important;
  }
}

Answer 1

你的 css 不会影响你的 lottie 因为 .lottie 是一个 class 但你的 lottie 被定义为一个 id，所以使用 #lottie 代替：

@media screen and (max-width: 600px) {
  #lottie {
    display: none !important;
  }
}

Answer 2

在 <Lottie /> 中删除 d-none 并添加 d-lg-block d-md-block d-sm-none d-none 就可以了

Answer 3

所以问题是，通过 React，您可以有条件地渲染组件，而无需使用原生 dom 操作，例如 document.getElementById.

首先，让我们尝试简化获得 windows 尺码的方式：
创建某种可以在其他地方重用的导出函数
windowDimensions.js

export function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

然后将其导入您的应用程序

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
import {getWindowDimensions} from './windowDimensions.js';

export default function App() {
  const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
  preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
<div id="lottie">
// Here we use our conditional rendering
{ getWindowDimensions().width > 600 &&
  <Lottie
    options={defaultOptions}
    height={800}
    width={1000}
    style={{
      top: "30%",
      right: "10%",
      zIndex: -1,
      overflow: "hidden",
      position: "fixed",
    }}
  />
</div>
}
  );
}

如果 window 宽度大于 600，此代码将只渲染你的 lottie 组件。当然，你仍然可以使用 css 条件渲染，你的代码似乎可以。也许尝试使用 visibility: hidden 代替您的媒体查询。小心，你在你的反应代码中定义了一个 id lottie，它应该在你的 css 中用作 #lottie。您目前在 css 中将其用作 .lottie，它指的是 class。这可能就是您的 css 方法不起作用的原因。
最后，我还要看一下您添加到 lottie 组件中的 classes 指的是什么。

希望这能给你一个开始调查的地方。
这里有一些关于条件渲染的docs。

React js 中 lottie 动画的屏幕大小调整

Screen Resizing for lottie animation in React js

css

reactjs

bootstrap-4

lottie

react-hooks