Reactjs - 在内联 CSS 中设置过渡答案

【问题标题】：Reactjs - set transition in inline CSSReactjs - 在内联 CSS 中设置过渡
【发布时间】：2020-09-08 20:43:46
【问题描述】：

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

我想让动画中的 blinky 灯放大和缩小，使它们看起来更有弹性而不那么闪烁

目前，我有一个反应类，它在 JSON 数组中呈现带有值对象索引的 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 中，我有类的关键帧，例如这些；每个类在整个动画中只出现片刻：

.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

【问题讨论】：

什么是闪烁的灯/点？你指的是div里面的数字吗？
您在代码框中看到的闪烁点由 json 中的值表示：[x]。它是一个数字，然后缩放变换。
参考这个stackoverflow.com/questions/6510094/…
您的意思是对于 space1, day3，比例为 (3,3)，您的问题是为什么它不可见？
完全正确；我想看到它的规模，而不是让它只是眨眼

标签： javascript css reactjs

【解决方案1】：

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

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

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

【讨论】：