js页面动画效果代码

function animateElement(element, targetPosition, duration) {
    const startPosition = element.offsetLeft;
    const distance = targetPosition - startPosition;
    let startTime = null;

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = timestamp - startTime;
        const percentage = Math.min(progress / duration, 1);
        element.style.left = `${startPosition + distance * percentage}px`;

        if (progress < duration) {
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}

// 使用示例
const box = document.getElementById('myBox');
animateElement(box, 300, 1000); // 移动到300px位置，持续1秒

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotating-element {
    animation: rotate 2s linear infinite;
}

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

function FadeInComponent() {
    const [inProp, setInProp] = useState(false);

    return (
        <div>
            <CSSTransition in={inProp} timeout={300} classNames="fade" unmountOnExit>
                <div className="box">Hello, world!</div>
            </CSSTransition>
            <button onClick={() => setInProp(!inProp)}>Toggle</button>
        </div>
    );
}