React.js-在嵌入式CSS中设置过渡 [英] Reactjs - set transition in inline CSS

问题描述

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

Codesandbox for reference: https://codesandbox.io/s/busy-leaf-onnqq

我想放大和缩小动画中的眨眼灯，使它们看起来更具弹性和眨眼更少

I want to make the blinky lights in the animation scale up and down, so they look more stretchy and less blinky

当前，我有一个react类，该类在JSON数组中呈现带有值对象索引的div.我正在使用索引和transform transform属性缩放div:

Currently, I have a react class that renders divs with values object indices in a JSON array. I'm scaling divs using the index, and the transform translate property:

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中，我有此类的关键帧，例如:每个类在整个动画中只出现片刻:

In the css I have keyframes for the classes, such as these; each class only appearing for a moment in the whole 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中设置关键帧，但是如果有更好的方法，那就太好了.我尝试添加简单的过渡，但这是行不通的.

What i would like to do it set keyframes right in the jsx if possible, but if theres a better way, thats great. i tried adding simple transitions, but that's not working.

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]}) `

                  }}

是的，我如何使这些闪烁的点缩放?

So yeah, how can i make these blinky dots scale?

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

推荐答案

实际上，缩放效果很好.但是，问题在于它的内容正在移到屏幕的左侧.只需尝试在这些 divs 中添加 text-align:center ，您就可以看到它.

Actually, scaling is working fine. But, the problem is that its content is moving out to the left side of the screen. Just try adding text-align: center to those divs and you will be able to see it.

缩放并不关心不在窗口左侧的情况.不知道在这里使用 scale 的目的是什么，但是我会尽量避免使用它，因为它在某些设备和浏览器上也存在字体渲染问题.

Scaling doesn't care about not going to the left of the window. Not sure what is your purpose of using scale here, but I would try to avoid it because it also has font rendering issues on some devices and browsers.

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

Instead, I would use CSS calcfor the font-size and do something like calc(x * 1em), where x can be dynamic value.

这篇关于React.js-在嵌入式CSS中设置过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！