スタイリッシュなコンポーネントを使用しているときにコンポーネントを反応させるためにアニメーションを適用する

Question

新しいライブラリを使用して、リアクションコンポーネント、Styled-Componentsを作成しています。

onClickを使用してコンポーネントにTrembleアニメーションを適用したいと思います。

export class FormLoginTest extends React.Component { // eslint-disable-line react/prefer-stateless-function 

     static propTypes = { 
     isTrembling: React.PropTypes.bool 
     }; 

     static defaultProps = { 
     isTrembling: true 
     }; 

     onMakeTremble() { 
     alert("hello") 

     } 

     render() { 
     return (
      <Form > 
      <ContainerFluid> 
       <H2>Login</H2> 
      </ContainerFluid> 
      <ContainerFluid> 
       <Label htmlFor="username">Username</Label> 
       <Input type="text" id="username" placeholder="bob" autoCorrect="off" autoCapitalize="off" spellCheck="false" /> 
      </ContainerFluid> 
      <ContainerFluid> 
       <Label htmlFor="password">Password</Label> 
       <Input id="password" type="password" placeholder="••••••••••" /> 
      </ContainerFluid> 
      <ContainerFluid> 
       <Button nature="success" onClick={this.onMakeTremble}>Hello</Button> 
      </ContainerFluid> 
      </Form> 
     ); 
     } 
    } 

だからすべてのCSSにはJavaScriptを介して適用され、スタイル付きのコンポーネントとはstyle.cssにシートが存在しません。フォームがすでにCSSを適用されています：

エクスポートクラスフォームがReact.Componentを拡張する{// eslintディセーブルライン/好む-ステートレス機能

 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; 

反応し、私もコンポーネント震えるがあります。

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; 

これがどのように機能するかについての手掛かりはありますか？

Answer 1

キーフレームセクションのドキュメントを確認してください。 https://www.npmjs.com/package/styled-components

あなたは'styled-components'からキーフレームをインポートしようとすると、このようにそれを使用する可能性があります：私の勾配で、このコードのdoesntの仕事として、

例

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

私はキーフレームで自分自身を問題に遭遇していますアニメーションは、他の人と一緒になります。

私の質問/問題は後でコメントにリンクします:)