在React.js中正确使用Animate.js目标的方法如下:
npm install animate.css
或者
yarn add animate.css
import 'animate.css/animate.min.css';
import React, { useEffect } from 'react';
import './YourComponent.css';
const YourComponent = () => {
useEffect(() => {
const element = document.getElementById('yourElement');
element.classList.add('animate__animated', 'animate__fadeIn');
setTimeout(() => {
element.classList.remove('animate__animated', 'animate__fadeIn');
}, 1000);
}, []);
return (
Your content
);
};
export default YourComponent;
在上面的代码中,我们在组件挂载时使用useEffect钩子来添加动画类名并在一段时间后删除它。
.your-class {
animation-duration: 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate__fadeIn {
animation-name: fadeIn;
}
在上面的代码中,我们定义了一个fadeIn动画,并将其应用于具有your-class类名的元素。
通过以上步骤,您就可以在React.js元素上正确使用Animate.js目标了。请注意,您可以根据需要使用不同的Animate.css类名和自定义样式来创建您自己的动画效果。