Reactjs - 在内联 CSS 中设置转换

Question

Codesandbox 供参考： https://codesandbox.io/s/busy-leaf-onnqq

我想让animation中的闪烁灯上下缩放，这样它们看起来更有弹性，闪烁更少

目前，我有一个反应 class ，它在 JSON 数组中呈现具有值 object 索引的 div。 我正在使用索引和转换转换属性缩放 div：

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json";

class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data;
  }
  renderDiv = () => {
    var df4 = df3["Devotions"];
    console.log(df4);
    return df4.map(v => {
      return Object.keys(v).map(host => {
        return (
          <div>
            <div
              className={host}
              style={{
                fontFamily: "Djakarta",
                color: "rgba(143, 0, 145,0.6)",
                margin: "27px",
                fontSize: "9px"
              }}
            >
              {host}
              {Object.keys(v[host]).map((x, i) => (
                <div
                  key={i}
                  className={`day${i + 1}`}
                  style={{
                    borderRadius: "50%",
                    transform: `scale(${v[host][x]},${v[host][x]})`,
                    opacity: "9%"
                  }}
                >
                  {v[host][x]}
                </div>
              ))}
            </div>
          </div>
        );
      });
    });
  };

  render() {
    return <div id="animap">{this.renderDiv()}</div>;
  }
}

export default Maps;

在 css 我有类的关键帧，比如这些； 每个 class 在整个 animation 中只出现片刻：

.day1 {
  height: 19px;
  width:19px;
  animation: a1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0%;
}
@keyframes a1 {
  0%{opacity:  0%}
  5%{opacity:  0%}
  10%{opacity: 9%}
  20%{opacity: 0%}
  30%{opacity: 0%}
  40%{opacity: 0%}
  50%{opacity: 0%}
  60%{opacity: 0%}
  70%{opacity: 0%}
  80%{opacity: 0%}
  90%{opacity: 0%}
  100%{opacity: 0%}
}
...

如果可能的话，我想在 jsx 中设置关键帧，但如果有更好的方法，那就太好了。 我尝试添加简单的过渡，但这不起作用。

Object.keys(v[host]).map((x, i) => (
                <div
                  key={i}
                  className={`d${i + 1}`}
                  style={{
                    borderRadius: "50%",
                    transition: 'transform 0.5s',
                    transform: `scale(${v[host][x]},${v[host][x]}) `

                  }}

所以，是的，我怎样才能使这些闪烁的点按比例缩放？

https://codesandbox.io/s/busy-leaf-onnqq

Answer 1

实际上，缩放工作正常。 但是，问题是它的内容正在移到屏幕的左侧。 只需尝试将text-align: center添加到这些divs中，您就可以看到它。

缩放不关心不去 window 的左侧。 不确定您在此处使用scale的目的是什么，但我会尽量避免使用它，因为它在某些设备和浏览器上也存在字体渲染问题。

相反，我会使用 CSS calc作为font-size并执行类似calc(x * 1em)的操作，其中 x 可以是动态值。