如何在加载元素上不显示框阴影答案

【问题标题】：How to not show box-shadow on loading element如何在加载元素上不显示框阴影
【发布时间】：2023-04-09 06:34:02
【问题描述】：

当我点击搜索按钮时，我会在我的 React-Redux 应用中获得一个热门曲目列表。

在加载结果时，我会在轨道完全加载之前为每个渲染轨道获取容器 box-shadow。像这样：

JS：

const TopTracks = ({ track }) => {
  return (
    <div>
      <iframe
        src={`https://open.spotify.com/embed/track/${track.id}`}
        title={track.name}
        width="300"
        height="80"
        allowtransparency="true"
        allow="encrypted-media"
        className="tracks"
      ></iframe>
    </div>
  );
};

export default TopTracks;

CSS：

.tracks {
  margin-bottom: 0.75em;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

有什么办法让这些阴影效果在元素完全加载之前不显示？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

我认为您可以添加诸如 .shadowed 之类的附加类并将 box-shadow 属性移到那里。然后你可以添加 onLoad 回调到 iframe 并根据加载状态添加或删除阴影。

const TopTracks = ({ track }) => {
  const [loaded, setLoaded] = useState(false);

  finishLoading() {
    setLoaded(true);
  }

  return (
    <div>
      <iframe
        src={`https://open.spotify.com/embed/track/${track.id}`}
        title={track.name}
        width="300"
        height="80"
        allowtransparency="true"
        allow="encrypted-media"
        className={"track " + (loaded ? "shadowed": "")}
        onLoad={this.finishLoading}
      ></iframe>
    </div>
  );
};

export default TopTracks;

【讨论】：

【解决方案2】：

我建议创建某种“加载”类来隐藏元素，然后在加载完成后将其删除：

.tracks {
    margin-bottom: 0.75em;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

    opacity: 1;
    transition: opacity 0.25s ease;
}

.tracks.loading {
    opacity: 0;
}

【讨论】：

【解决方案3】：

感谢@AlexShinkevich 的回答，我设法达成了妥协。

JS：

import { useState } from "react";

const TopTracks = ({ track }) => {
  const [loaded, setLoaded] = useState(false);

  // When Tracks are Loaded, Change the State to True
  const finishLoading = () => {
    setLoaded(true);
  };

  return (
    <div>
      <iframe
        src={`https://open.spotify.com/embed/track/${track.id}`}
        title={track.name}
        width="300"
        height="80"
        allowtransparency="true"
        allow="encrypted-media"
        className={loaded ? "shadow" : "tracks"}
        onLoad={finishLoading}
      ></iframe>
    </div>
  );
};

export default TopTracks;

CSS：

.tracks {
  margin-bottom: 0.75em;
  border-radius: 10px;
}

.shadow {
  margin-bottom: 0.75em;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

我必须添加一个条件来检查它是否已加载，然后相应地更改类名。

我按照@AlexShinkevich 的回答，但无法渲染阴影和样式。

虽然通过这种方式，盒子阴影空间在加载时不会显示，但它们会在轨道加载后稍微延迟显示。

【讨论】：