ReactJS CSS - 我如何重新触发 @keyframes CSS 动画答案

【问题标题】：ReactJS CSS - how do I re-trigger a @keyframes CSS animationReactJS CSS - 我如何重新触发 @keyframes CSS 动画
【发布时间】：2018-07-28 23:56:30
【问题描述】：

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

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;

然后我用 css 为 .fall-in 类设置动画：

@keyframes fall-in {
  0% {
    margin-top: -600px;
  }
  100% {
    margin-top: 0;
  }
}

.fall-in {
  animation-name: fall-in;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

我希望每次 .subtitle 和 .text div 的内容发生变化时触发一次此动画，无论动画是否发生变化。

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

【问题讨论】：

从您的问题来看，听起来 react-transition-group 组件可以处理您的动画。 github.com/reactjs/react-transition-group/tree/v1-stable.
我猜...但是我正在使用 react-static 构建一个网页，并且希望尽可能小，所以我正在寻找另一种解决方案 - 基本上是想弄清楚一个 hack 如何让 react 重新渲染 DOM
如果您的目标是让 React 重新渲染 DOM，您可以通过 setState 更改添加或删除 className 或其他内容，以强制在更改时重新渲染。 .subtitle 和 .text div 是来自 state 还是用户输入？我无法想象您的应用程序在做什么，但听起来很有趣。
基本上它们来自一个将 react-static 作为道具传递的 CMS。这是一个作品集——该组件在不同的 CV 技能之间切换，并为文本设置动画。问题是，即使 div 的内容（subtitle、text）发生了变化，DOM 节点本身也不会重新渲染，因此该类只会应用一次（不会触发动画）
您是否查看过stackoverflow.com/questions/32414308/…，其中讨论了使用 componentWillReceiveProps(nextProps) 根据道具变化来更新您的状态？这是一个旧帖子，可能已经过时，但它似乎与您的需求相似。

标签： javascript css reactjs css-animations

【解决方案1】：

嘿，也许你想试试我的 OSS。

https://github.com/bluebill1049/react-simple-animate

我认为它可以满足您的上述要求，也许值得一试？

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>
};

【讨论】：