jQuery Transit平滑插件

Super-smooth CSS3 transformations and transitions for jQuery — v0.1.1

下载此JS（未压缩）  14kb  下载成品 (压缩版)  2kb gzipped

How to use

本插件需要jQuery 1.4+的版本支持，仅需要引用本程序的JS文件即可 
用 $('...').transition 方法取代 jQuery的 $('...').animate方法来使用此插件. 此方法的语法与jQueryanimate.保持一致。

平移 (Translate)

将鼠标移动到范例上来查看效果。

水平移动

$('.box').transition({ x: '90px' });

垂直移动

$('.box').transition({ y: '30px' });

各向移动

$('.box').transition({ x: '200px', y: '20px' });

可用的平移方法

这一方法支持如下的移动方法。 详情可以参考这篇 README文档。

• 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)

旋转

旋转

$('.box').transition({ rotate: '30deg' });

扭曲

水平扭曲

$('.box').transition({ skewX: '30deg' });

垂直扭曲

$('.box').transition({ skewY: '30deg' });

各向扭曲

$('.box').transition({
    skewX: '30deg',
    skewY: '-30deg'
});

放大

放大到 120%

$('.box').transition({ scale: 1.2 });

水平放大200%，垂直方向放大150%

$('.box').transition({ scale: [2, 1.5] });

3D旋转(仅限Webkit内核浏览器)

你可以使用 rotateX 和 rotateY来实现旋转变换。 而 perspective 属性是可选的，但在rotateX/Y属性后通常应对此属性加以设置。

水平旋转

$('.box').transition({
    perspective: '100px',
    rotateX: '180deg'
});

垂直旋转

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

3D旋转

$('.box').transition({
    perspective: '100px',
    rotate3d: '1, 1, 0, 180deg'
});

其他属性变换

你可以动画化任意支持的CSS属性。

$.fn.transition 可以用于任意CSS属性

$('.box').transition({
    opacity: 0,
    scale: 1.6
});

$('.box').transition({
    marginLeft: '20px',
    height: '80px'
});

回调

$.fn.transition(options, [duration], [easing], [callback]);
$.fn.transition 与 $.fn.animate 工作方式一致。 你可以传递 duration, easing, and callback参数。

提供回调

$('.box').transition({ x: -100 }, function() {
    $(this).transition({ opacity: 0 });
});

自定义速度

自定义速度 (jQuery 风格)

$('.box').transition({ opacity: 0 }, 'slow');

自定义速度 (毫秒为单位)

$('.box').transition({ opacity: 0 }, 2000);

平移速度渐变效果

只需要给 $.fn.transition函数提供第三个参数即可

线性

$('.box').transition({ x: 330 }, 500, 'linear');

渐入

$('.box').transition({ x: 330 }, 500, 'in');

慢移

$('.box').transition({ x: 330 }, 500, 'ease');

渐出

$('.box').transition({ x: 330 }, 500, 'out');

渐入-渐出

$('.box').transition({ x: 330 }, 500, 'in-out');

快移

$('.box').transition({ x: 330 }, 500, 'snap');

自定义

$('.box').transition({ x: 330 }, 500, 'cubic-bezier(0,0.9,0.3,1)');

延迟

延迟 400ms

$('.box').transition({ x: -100, delay: 400 });

交替使用渐变/延续语法

你可以提供 easing and duration 参数来取代 Great for CoffeeScript.

$('.box').transition({
    x: '100px',
    easing: 'snap',
    duration: '2000ms'
});

可选单位

所有的单位 (px, deg, ms, etc) 是可选的。

$('.box').transition({
    x: 100,
    duration: 2000,
    rotate: 30,
    easing: 'snap'
});

相对单位

此插件兼容jQuery风格的相对单位. 将你的值使用 += or -= 作为开头。

$('.box').transition({
    rotate: '+=30deg',
    x: '+=30'
});

$.fn.css

CSS3 也可以通过 $.fn.css 调用.

$('.box').css({
    x: '90px',
    y: '10px',
    rotate: '-10deg'
});

变换（自动增加前缀）

$('.box').css({ transform: 'rotate(40deg)' });

显示值

$('.box').css({ rotate: '40deg' });
alert($('.box').css('rotate'));
alert($('.box').css('transform'));

Run

设定变换的起始值

通过 $.fn.css ，你可以设定变换的起始值。格式是 “x y”, 其中 x 和 y 是给定的坐标元素。

$('.box').css({ transformOrigin: '10px 10px' });
$('.box').transition({ rotate: 40, scale: 1.2 });

队列化连续动作

插件默认应用了jQuery的 effect queue 特性, 比如说 $.fn.animate 方法。 这意味着这些动作不会同时触发。

$('.box').
    transition({ x: '-40px' }, 250).
    transition({ x: '0px' }, 250).
    transition({ y: '-40px' }, 250).
    transition({ y: '0px' }, 250);

从一种风格过渡到另一种风格

你可以将 css and transition 连接起来使用 (比如.css({ .. }).transition({ .. })) 。

$('.box').
    css({ x: '-800px' }).
    transition({ x: 0 });

浏览器兼容性

• IE 10+ 
• Firefox 4+ 
• Safari 5+ 
• Chrome 10+ 
• Opera 11+ 
• Mobile Safari

关于CSS渐变，请查阅 caniuse.com’s 网站 。为了兼容Mobile Safari浏览器，jQuery使用了translate3d and scale3d方法。

那老版浏览器呢？

jQuery兼容旧版本浏览器的方法很简单，那就是不渲染渐变效果 (比如rotate, scale, etc) ，但是保留其变化后的效果(例如opacity, marginLeft, etc) 。
同样，延时也被取消了。

回到基于帧的动画

如果在浏览器不支持渐变时候改用传统的基于帧的渐变，同样提供了方法
(一般来说不推荐这么做，因为会降低速度):

// 更改 .transition() 方法为 .animate()
// 如果浏览器不支持渐变方法。
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

设定默认值

// 渐变的默认值与 $.fn.animate. 一样。
$.fx.speeds._default = 300;

// 初始的easing值储存于 $.cssEase.
$.cssEase._default = 'snap';

自定义渐变

在 $.cssEase中改变该值

$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
$('.box').transition({ x: 0 }, 500, 'bounce');

源代码

查看注释和源码。 还可以在  GitHub上查看反馈

版权