前端动画：告别 jQuery animate，拥抱现代替代方案 | 极客日志

JavaScript大前端

前端动画：告别 jQuery animate，拥抱现代替代方案

前端动画：告别 jQuery animate，拥抱现代替代方案毒舌时刻 > 这动画效果做得跟幻灯片似的，一点都不流畅。各位前端同行，咱们今天聊聊前端动画。别告诉我你还在使用 jQuery animate，那感觉就像在没有减震器的情况下开车——能开，但颠簸得要命。为什么你需要现代前端动画最近看到一个项目，动画效果卡顿，代码复杂难以维护。我就想问：你是在做动画还是在做卡顿展示？反面教材 **…

星云发布于 2026/4/6更新于 2026/5/2426K 浏览

前端动画：告别 jQuery animate，拥抱现代替代方案

毒舌时刻

这动画效果做得跟幻灯片似的，一点都不流畅。

各位前端同行，咱们今天聊聊前端动画。别告诉我你还在使用 jQuery animate，那感觉就像在没有减震器的情况下开车——能开，但颠簸得要命。

为什么你需要现代前端动画

最近看到一个项目，动画效果卡顿，代码复杂难以维护。我就想问：你是在做动画还是在做卡顿展示？

反面教材

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>jQuery Animation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .box { width: 100px; height: 100px; background-color: red; position: relative; }
  </style>
</head>
<body>
  <div class="box"></div>
  <button id="animate">动画</button>
  <script src="app.js">

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// app.js
$(document).ready(function() {
  $('#animate').click(function() {
    $('.box').animate({ left: '200px', opacity: '0.5', height: '200px', width: '200px' }, 1000);
  });
});

/* styles.css */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: all 0.3s ease;
}
.box:hover { transform: scale(1.2); background-color: blue; }
.box.animate { animation: move 1s ease forwards; }
@keyframes move {
  from { left: 0; opacity: 1; height: 100px; width: 100px; }
  to { left: 200px; opacity: 0.5; height: 200px; width: 200px; }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box"></div>
  <button id="animate">动画</button>
  <script src="app.js"></script>
</body>
</html>

// app.js
document.getElementById('animate').addEventListener('click', function() {
  const box = document.querySelector('.box');
  box.classList.add('animate');
  setTimeout(() => { box.classList.remove('animate'); }, 1000);
});

import React, { useState } from 'react';
import { motion } from 'framer-motion';
function App() {
  const [animate, setAnimate] = useState(false);
  return (
    <div>
      <motion.div className="box" initial={{ x: 0, opacity: 1, height: 100, width: 100 }} animate={animate ? { x: 200, opacity: 0.5, height: 200, width: 200 } : {}} transition={{ duration: 1 }} whileHover={{ scale: 1.1, backgroundColor: 'blue' }} />
      <button onClick={() => setAnimate(!animate)}>{animate ? '重置' : '动画'}</button>
    </div>
  );
}
export default App;

/* styles.css */
.box { background-color: red; position: relative; }

import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';
function App() {
  const boxRef = useRef(null);
  const handleAnimate = () => {
    gsap.to(boxRef.current, { x: 200, opacity: 0.5, height: 200, width: 200, duration: 1, ease: 'power2.out' });
  };
  const handleReset = () => {
    gsap.to(boxRef.current, { x: 0, opacity: 1, height: 100, width: 100, duration: 1, ease: 'power2.out' });
  };
  return (
    <div>
      <div ref={boxRef} className="box"></div>
      <button onClick={handleAnimate}>动画</button>
      <button onClick={handleReset}>重置</button>
    </div>
  );
}

/* styles.css */
.box { width: 100px; height: 100px; background-color: red; position: relative; }

import React, { useState } from 'react';
import { useSpring, animated } from '@react-spring/web';
function App() {
  const [animate, setAnimate] = useState(false);
  const styles = useSpring({ x: animate ? 200 : 0, opacity: animate ? 0.5 : 1, height: animate ? 200 : 100, width: animate ? 200 : 100, config: { duration: 1000 } });
  return (
    <div>
      <animated.div className="box" style={styles} />
      <button onClick={() => setAnimate(!animate)}>{animate ? '重置' : '动画'}</button>
    </div>
  );
}

/* styles.css */
.box { background-color: red; position: relative; }

前端动画：告别 jQuery animate，拥抱现代替代方案

前端动画：告别 jQuery animate，拥抱现代替代方案

毒舌时刻

为什么你需要现代前端动画

反面教材

更多推荐文章

相关免费在线工具

正确姿势

1. CSS 动画

2. Framer Motion

3. GreenSock Animation Platform (GSAP)

4. React Spring

更多推荐文章

相关免费在线工具

前端动画：告别 jQuery animate，拥抱现代替代方案

前端动画：告别 jQuery animate，拥抱现代替代方案

毒舌时刻

为什么你需要现代前端动画

反面教材

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

正确姿势

1. CSS 动画

2. Framer Motion

3. GreenSock Animation Platform (GSAP)

4. React Spring

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具