Question

我正在使用新库来创建React Components，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>
        );
      }
    }

因此没有带有Styled Components的Style.css表，所有css都是通过javascript应用的。表单已经应用了css：

导出类表单扩展了React.Component {// eslint-disable-line react / prefer-stateless-function

      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;

我也有一个Tremble组件：

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'导入关键帧并使用它：

示例

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

我自己遇到了关键帧的问题，因为这段代码不适用于我的渐变动画，但它会与其他人一起使用。

我稍后会在评论中链接到我的问题/问题：）！

在使用样式化组件时将动画应用于React组件

1 个答案: