如何在Reactjs中重播CSS3动画 [英] How to replay a CSS3 animation in Reactjs

问题描述

我已经在我的css文件中设置了动画:

I have set my animation in my css file:

 @-webkit-keyframes jello-horizontal{
    0%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    30%{
        -webkit-transform:scale3d(1.25,.75,1);
        transform:scale3d(1.25,.75,1)
    }
    40%{
        -webkit-transform:scale3d(.75,1.25,1);
        transform:scale3d(.75,1.25,1)
    }
    50%{
        -webkit-transform:scale3d(1.15,.85,1);
        transform:scale3d(1.15,.85,1)
    }
    65%{
        -webkit-transform:scale3d(.95,1.05,1);
        transform:scale3d(.95,1.05,1)
    }
    75%{
        -webkit-transform:scale3d(1.05,.95,1);
        transform:scale3d(1.05,.95,1)
    }
    100%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
@keyframes jello-horizontal{
    0%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    30%{
        -webkit-transform:scale3d(1.25,.75,1);
        transform:scale3d(1.25,.75,1)
    }
    40%{
        -webkit-transform:scale3d(.75,1.25,1);
        transform:scale3d(.75,1.25,1)
    }
    50%{
        -webkit-transform:scale3d(1.15,.85,1);
        transform:scale3d(1.15,.85,1)
    }
    65%{
        -webkit-transform:scale3d(.95,1.05,1);
        transform:scale3d(.95,1.05,1)
    }
    75%{
        -webkit-transform:scale3d(1.05,.95,1);
        transform:scale3d(1.05,.95,1)
    }
    100%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
 .jello-horizontal{
    -webkit-animation:jello-horizontal .9s both;
    animation:jello-horizontal .9s both
}

在首次加载我的组件时，它可以完美工作，但是每次单击特定按钮时如何使我的组件加载?

It works perfectly when mycomponent first loads, but how do I make my component load every time I click a particular button?

我的组件非常复杂，可以在此处添加代码，但我认为这不是必需的，因为我只需要一个有关如何在单击按钮时触发动画的示例.不知道这是否有可能.我单击的按钮将更新状态，这是该组件的简化版本的示例:

My component is pretty complex and can add the code here but I don't think it's necessary as I just need an example of how to trigger the animation on button click. Not sure if this is even possible. The button I click would update a piece of state here's an example of a simplified version of the component:

import React, {Component} from 'react';

export class Cards extends Component {
  constructor() {
    super();
    this.state = {
      flashCardIndex: 0,
      cards: [],
      currentCard: undefined,
      rightActive: true,
      leftActive: true,
      cardError: false,
      nowPlaying: false,
      showLoader: false,
      animateCard: true,
    };

    render() {
       return (<div className="flash-card jello-horizontal">
                  <a href="">Run animation</a>
              </div>)
    }    
}

推荐答案

ReactJS使用 key 属性来区分差异算法中的元素.因此，组件第一次加载时，react将其假定为新元素并相应地进行渲染.但是下次它尝试使用不同的数据渲染同一元素时，react感觉到它具有相同的结构，只用旧数据替换了新数据.

ReactJS uses key attribute to distinguish between elements in the diffing algorithm. So, the first time your component loads , react assumes it as new element and renders it accordingly. But next time it tries to render the same element with different data , react feels that it has the same structure and only replaces the new data with old data.

因此，要对每个更改应用动画，我们需要告诉react这是一个新组件.这可以通过在动画类中为元素提供 key 来完成.密钥可以使用任何随机数生成器(我通常使用 shortid )随机生成.

So to apply animations for every change, we need to tell react that this is a new component. This can be done by providing a key to the element with your animation class. And key can be randomly generated using any random number generator( I generally use shortid).

有关工作示例，请参阅:此

For working example, please refer: this

这篇关于如何在Reactjs中重播CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！