스타일 적용 구성 요소를 사용하는 동안 구성 요소를 사용하여 애니메이션 적용 적용

Question

새로운 구성 요소를 사용하여 React 구성 요소, 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> 
     ); 
     } 
    } 

스타일있는 구성 요소가 포함 된 Style.css 시트가 없으므로 모든 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 % { 변환 : 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'에서 키 프레임을 가져 오기를 시도하고 다음과 같이 사용할 수 있습니다 내 그라데이션이 코드 나던 작품으로,

예

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

내가 키 프레임으로 자신을 문제가 발생하고 애니메이션이지만 다른 사람들과 함께 할 것입니다.

내 의견/문제는 나중에 여기에 댓글로 연결됩니다 :)!