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

Posted 2023-03-15

【中文标题】在使用样式化组件时将动画应用于 React 组件

【英文标题】：Applying Animation to React Component while using Styled Components

【发布时间】：2017-03-14 05:14:52

【问题描述】：

我正在使用一个新库来创建 React 组件 Styled-Components。

我想通过 onClick 在我的组件上应用动画颤抖。

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 都是通过 javascript 应用的。表单已经应用了一个 css：

export class Form extends 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：

常量抖动 = 关键帧` 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;

关于这可能如何工作的任何线索？

【问题讨论】：

这里有同样的问题。 ***.com/questions/64635239/…

【参考方案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;
`;

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

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