animation以及transition

最新推荐文章于 2024-05-27 13:21:55 发布

原创最新推荐文章于 2024-05-27 13:21:55 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

该文章展示了一个React组件，使用useStateHook和antd的Button组件来控制CSS动画。通过点击按钮，动画在div元素上执行，包括transform和transition属性的变化，以及keyframes定义的动画效果。同时，文章还涉及到动画事件的监听，如开始、结束和重复运动事件。

import React, { useState } from "react";
import { Button } from 'antd'
import cs from 'classnames'
import './styles.less'

// animation 自动执行
// transform transition 用户主动触发

// 动画事件监听
// 开始事件 ,结束事件,重复运动事件

export default function Animation(props) {
    const [x, setX] = useState(false)

    const onClick = () => {
        setX(true)
    }

    return (
        <div styleName="animation">
            <div styleName={cs('animation-box', { xxx: x })}></div>
            <Button onClick={onClick}>滚动</Button>
            <div styleName="animation-box2"></div>
        </div>
    )
}

.animation {
  .animation-box,
  .animation-box2 {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #99f;
    transition: transform 1s ease;
  }

  .xxx {
    transform: translate3d(200px, 0, 0);
  }

  @keyframes x1 {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(100px, 0, 0);
      background: pink;
      width: 200px;
    }
    100% {
      transform: translate3d(200px, 0, 0);
    }
  }

  .animation-box2 {
    animation: x1 1s ease-in-out 0s 5 alternate;
  }
}