1.使用animation.css插件
import 'animate.css';
<div className="animate__animated animate__bounceInRight animate__delay-2s">
<Button type="primary">测试</Button>
</div>
div包裹的元素都处于动画内容区，react中目前只能在className中写animation样式
2.使用# react-transition-group插件
import { Transition} from 'react-transition-group'
const duration = 1200
const defaultStyle = {
transition: `opacity ${duration}ms`,
opacity: 0,
color: 'red'
}
const transitionStyles = {
entering: { opacity: 0.5 },
entered: { opacity: 1, color: 'gray' },
exiting: { opacity: 0.5},
exited: { opacity: 0 },
}
export default function FadeTransition() {
const [inProp, setInProp] = useState(true)
return (
<>
<Transition
in={inProp}
timeout={duration}
appear={true}
>
{(state) => {
console.log(state, 'state')
return (
<div
style={{
...defaultStyle,
...transitionStyles[state],
}}
>
I'm a fade Transition!
</div>
)}}
</Transition>
<Button onClick={() => setInProp(!inProp)}>Click to toggle</Button>
</>
)
}
Props
- nodeRef
默认情况下，各个回调会接受 Transition 组件第一个非空子节点对应的DOM节点作为第一个参数，如果声明 nodeRef 则不传递DOM节点，此时可以直接操作 nodeRef 对应的DOM节点。
- children
children 可以为一个接受 state 参数的函数，或者 React 元素。
- in
设置组件的显示或隐藏状态。注意，此状态只是逻辑上的概念，并不会设置元素的样式或者挂载卸载组件，这些状态的意义完全取决于你。
默认值: false
- mountOnEnter
设置可以在初始化时隐藏组件（延迟挂载组件），或者非 existed 状态时挂载组件（要同时设置 unmountOnExit）。
默认值: false
- unmountOnExit
设置当组件处于 exited 状态时卸载组件。
默认值: false
- appear
设置初始进入时拥有过渡效果。
默认值: false
- enter
设置入场时是否有过渡效果。
默认值: true
- exit
设置出场时是否有过渡效果。
默认值: true
- timeout
过渡持续时间。
类型：number | { enter?: number, exit?: number, appear?: number }
- addEventListener
自定义过渡结束时机，如果同时提供了 timeout 属性，则 timeout 仍然起作用。
- onEnter
在 entering 状态之前调用。
- onEntering
在 entering 状态之后调用。
- onEntered
在 entered 状态之后调用。
- onExit
在 exiting 状态之前调用。
- onExiting
在 exiting 状态之后调用。
- onExited
在 exited 状态之后调用。
Transition 组件允许您使用一个简单的声明性API描述一段时间内从一个组件状态到另一个组件状态的转换，提供动画阶段性的api 参考链接：zhuanlan.zhihu.com/p/493000748
3.页面滚动到指定位置，显示该元素的动画效果。
使用animation.css和wowjs插件
import React, { useEffect, useState} from "react";
import { Button } from 'antd'
import { WOW } from 'wowjs'
import '../../../node_modules/wowjs/css/libs/animate.css'
export default function FadeTransition() {
useEffect(() => {
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: -200,
mobile: true,
live: false
})
wow.init();
}, [])
return (
<>
<div
style={{height: '1000px',width: '100%'}}
>I'm a fade Transition!</div>
<div className='wow slideInLeft'>
<div style={{color:'red'}}>
<p>测试</p>
<p>一下</p>
<p>效果</p>
<p>怎么样</p>
</div>
</div>
</>
)
}
直接引入animation.css无效，需要寻找nodemodule里的animation包
4.使用CSSFX网站提供的动画效果
<div className={styles.main}>
<Button >测试</Button>
</div>
.main {
:global {
.ant-btn {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
// overflow: hidden;
// cursor: pointer;
::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 4px solid hsl(236, 32%, 26%);
transform-origin: center;
transform: scale(1);
}
::after {
content: '';
z-index: -1;
background-color: hsla(0, 0%, 100%, 0.2);
position: absolute;
top: -50%;
bottom: -50%;
width: 1.25em;
transform: translate3d(-525%, 0, 0) rotate(35deg);
}
:hover::after {
transition: all 0.75s ease-in-out;
transform-origin: center;
transform: scale(1.75);
opacity: 0;
}
}
}
}
网站链接：cssfx.netlify.app
