时间戳

首页 > 解决方案 > Reactjs - 在内联 CSS 中设置过渡

javascript - Reactjs - 在内联 CSS 中设置过渡

问题描述

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

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

目前，我有一个反应类，它在 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

标签： javascriptcssreactjs

解决方案

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

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

相反，我会使用 CSScalc来做类似的font-size事情calc(x * 1em)，其中​​ x 可以是动态值。

推荐阅读