Javascript ReactJS CSS-如何重新触发@keyframes CSS动画

我有一个组件，它可以切换某些内容和内容的动画，具体取决于它切换的方向：

import React, { Component } from "react";

class Skills extends Component {
  constructor(props) {
    super(props);

    this.state = {
      shownSkill: 0,
      fallIn: true,
      slideUp: false
    };
  }

  getPreviousSkill = () => {
    const { shownSkill } = this.state;
    const newSkill = shownSkill < 1 ? 3 : shownSkill - 1;
    this.updateShownSkill(newSkill, false);
  };

  getNextSkill = () => {
    const { shownSkill } = this.state;
    const newSkill = shownSkill > 2 ? 0 : shownSkill + 1;
    this.updateShownSkill(newSkill, true);
  };

  updateShownSkill = (skillIndex, fallIn) => {
    this.setState({
      shownSkill: skillIndex,
      fallIn: fallIn,
      slideUp: !fallIn
    });
  };

  getSkillData = () => {
    const { skills } = this.props;
    const { shownSkill } = this.state;
    return skills[shownSkill];
  };

  render() {
    const { name, skill, description } = this.getSkillData();
    const { shownSkill, slideUp } = this.state;
    const { skills } = this.props;
    return (
      <div className="route-container skills">
        <div className="skills-content-container">
          {slideUp ? (
            <div className="skills-right-content slide-up">
              <div className="subtitle">{name}</div>
              {description.map((p, i) => (
                <div className="text" key={i}>
                  {p}
                </div>
              ))}
            </div>
          ) : (
            <div className="skills-right-content
            fall-in">
              <div className="subtitle">{name}</div>
              {description.map((p, i) => (
                <div className="text" key={i}>
                  {p}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default Skills;

我希望每当

.subtitle

和

.text

divs的内容更改时，无论动画是否更改，此动画都会触发一次

---

这个例子只会在第一次添加css类时触发动画。

嘿，也许你想试试我的OSS

我认为它能满足你以上的要求，也许值得一试

import Animate from 'react-simple-img';
import React from 'react';

export default ({ready}) => {
   return <Animate startAnimation={ready} startStyle={{
       marginTop: '-600px',
   }} endStyle={{
       marginTop: '0',
   }}>
       <YourComponent />
   </Animate>
};

从“react simple img”导入动画；
从“React”导入React；
导出默认值（{ready}）=>{
返回
};

从您的问题来看，react transition group组件似乎可以处理您的动画。我猜…但我正在使用react-static构建一个网页，希望尽可能减小捆绑包的大小，因此我正在寻找另一个解决方案-基本上是想找出一个黑客如何使react重新呈现DOM如果您的目标是让react重新呈现DOM，您可以通过setState更改、添加或删除类名或其他内容，以强制在更改时重新渲染。.subtitle和.text div是来自state还是用户输入的？我无法想象你的应用程序在做什么，但听起来很有趣。基本上，它们来自CMS，可以将静态过程作为道具进行反应。这是一个公文包-组件在不同的CV技能之间切换，并设置文本动画。问题是，即使div（

subtitle

，

text

）的内容正在更改，DOM节点本身也不会重新渲染，因此该类只应用一次（不会触发动画），您是否检查了讨论使用componentWillReceiveProps（nextProps）根据道具更改来更新状态的内容？这是一篇旧文章，可能已经过时，但它似乎与您的需求相似。

import Animate from 'react-simple-img';
import React from 'react';

export default ({ready}) => {
   return <Animate startAnimation={ready} startStyle={{
       marginTop: '-600px',
   }} endStyle={{
       marginTop: '0',
   }}>
       <YourComponent />
   </Animate>
};