Animation anwenden, um Komponente zu reaktivieren, während gestylte Komponenten verwendet werden

Question

Ich verwende eine neue Bibliothek, um React Components, Styled-Components zu erstellen.

Ich möchte eine Animation Tremble auf meiner Komponente über ein OnClick anwenden.

So gibt es kein Style.css Blatt mit gestylt Komponenten, alle CSS wird über Javascript angewendet.

Exportklasse Form erstreckt React.Component {// eslint-disable-line reagieren/bevorzugen-stateless-Funktion

 static propTypes = { 
     children: React.PropTypes.node.isRequired, 
     className: React.PropTypes.string 
     }; 
     // 
     static defaultProps = { 
     isTrembling: true 
     }; 

     render() { 
     return (
      <form className={this.props.className}> 
      {React.Children.toArray(this.props.children)} 
      </form> 
     ); 
     } 
    } 

    // eslint-disable-next-line no-class-assign 
    Form = styled(Form)` 
       max-width: 800px; 
       margin:0 auto; 
       display: block; 
       height: 100%; 
       border: 1px solid grey; 
       & h2{ 
       text-align:center; 
       }; 
      `; 

    export default Form; 

Und ich habe eine Komponente Tremble auch: Form hat bereits eine CSS angewendet:

const shake = Keyframes` 10%, 90% { transform: translate3d (-1px, 0, 0); }

 20%, 80% { 
     transform: translate3d(2px, 0, 0); 
     } 

     30%, 50%, 70% { 
     transform: translate3d(-4px, 0, 0); 
     } 

     40%, 60% { 
     transform: translate3d(4px, 0, 0); 
     } 
    `; 


    const Tremble = styled.div` 
     display: inline-block; 
     &:hover { 
     animation: ${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both; 
     transform: translate3d(0, 0, 0); 
     backface-visibility: hidden; 
     perspective: 1000px; 
     } 
    `; 


    export default Tremble; 

Jeder Hinweis, wie dies funktionieren kann?

Answer 1

Überprüfen Sie die Dokumentation im Abschnitt Keyframes. https://www.npmjs.com/package/styled-components

Sie könnten versuchen, Keyframes von 'styled-components' und verwenden es wie folgt importieren:

Beispiel

import styled, {keyframes} from 'styled-components'; 

const moveGradient = keyframes` 
    0%{background-position:38% 0%} 
    50%{background-position:63% 100%} 
    100%{background-position:38% 0%} 
`; 

const Wrapper = styled.div` 
    background-size: 800% 800%; 
    width: 100vw; 
    height: 100vh; 
    background: linear-gradient(${props => props.gradientRotation}, #cc6bbb, #ffa86d); 
    animation: ${moveGradient} 10s ease-out infinite; 
`; 

Ich Begegnung ein Problem mit Keyframes selbst, da dieser Code funktioniert nicht mit meinem Gradienten Animation, aber es wird mit anderen.

Ich werde später auf meine Frage/Problem in einem Kommentar verlinken :)!