jQuery Transit 过渡效果

jQuery Transit 使用 CSS3 的新特性来实现过渡效果，比默认的.animate方法要顺畅得多。

因为使用 CSS3 进行过渡效果，所以对不支持 CSS3 的浏览器效果有所下降。

语法和.animate方法相同，因此很好上手。

• 版本：
• jQuery v1.4+
• jQuery Transit v0.9.12

• 为 jQuery 的 .css 方法支持以下属性：
• x (px)
• y (px)
• translate (x, y)
• rotate (deg)
• rotateX (deg)
• rotateY (deg)
• rotate3d (x, y, z, deg)
• scale (x, [y])
• perspective (px)
• skewX (deg)
• skewY (deg)

PS：对于使用连接符的属性需改为驼峰式写法，或者使用引号包括。如：padding-top属性需写为：paddingTop或者"padding-top"。

转换属性

除 jQuery 原本支持的属性外，还新支持一些属性（使用.css方法不会进行动画效果，只是直接改变值）

1. $("#box").css({ x: '30px'});                        // 向右移动 
2. $("#box").css({ y: '60px'});                        // 向下移动 
3. $("#box").css({ translate: [60, 30]});              // 向右下移动 
4. $("#box").css({ rotate: '30deg'});                  // 顺时针旋转 
5. $("#box").css({ scale: 2});                         // 放大2倍 (200%) 
6. $("#box").css({ scale: [2, 1.5]});                  // 宽度和高度不同的放大 
7. $("#box").css({ skewX: '30deg'});                   // 水平斜切 
8. $("#box").css({ skewY: '30deg'});                   // 垂直斜切 
9. $("#box").css({ perspective: 100, rotateX: 30});    // Webkit 3d 旋转 
10. $("#box").css({ rotateY: 30}); 
11. $("#box").css({ rotate3d: [1, 1, 0, 45]}); 

动画效果 - $.fn.transition

1. $('...').transition(options, [duration], [easing], [complete])

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：jQuery Transit 过渡效果

关键词：jquery