当前位置：首页 > 网页特效 > 动画效果

实现跨浏览器CSS3 transitions效果的jQuery插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

当该jQuery插件首次加载时，它将使用特性检测来判断浏览器是否支持CSS transitions。如果浏览器支持，Tram将管理样式并有浏览器来执行CSS动画。如果浏览器不支持，Tram将使用自己的补间动画引擎为每一帧动画设置样式，这个引擎是由requestAnimationFrame和performance.now()来驱动。

Tram可以通过AMD、CommonJS和浏览器的全局变量来调用。

```html
var tram = window.tram;
// or
var tram = require('tram');
```
在你为一个元素添加过渡效果之前，你需要用tram()方法来包装它。它会在元素的data中存储一个Tram class实例。我们需要它来制作auto-stop和其它状态。

```html
tram(element);
```
你也可以将它保存到一个变量中，这会在有大量元素的时候提供一些性能。

```html
var myTram = tram(element); // optional
```
必须通过add()方法来定义每一个元素的属性。它和CSS3 transition的标准语法很类似：property-name duration easing-function delay。

```html
tram(element).add('opacity 500ms ease-out');
```
当定义了一个过渡效果之后，它被存储在元素的data中。你可以在后面重新覆盖它，例如：

```html
tram(element).add('opacity 2s'); // changed duration to 2 seconds
```
使用start()方法来开始元素的过渡动画。

```html
tram(element).start({ opacity: 0.5 });
```
如果你需要在过渡动画结束时监听事件，可以通过then()方法来实现：

```html
tram(element)
  .start({ opacity: 0.5 })
  .then(function () { console.log('done!') });
```
序列也可以使用then()方法：

```html
tram(element)
  .start({ opacity: 0.5 })
  .then({ opacity: 1 })
  .then({ opacity: 0 });
```
Tram提供了一些虚拟属性来帮助完成CSS3 transforms。

```html
tram(element)
  .add('transform 1s ease-out-quint')
  .start({ x: 100, rotate: 45 }); // aka: translateX(100px) rotate(45deg)
```
可以通过set()方法来设置元素的样式。这个方法会停止所有的transitions，并立刻开始设置给定的样式：

```html
tram(element).set({ x: 0, opacity: 1 });
```
可以通过stop()方法来停止过渡动画。该方法会自动在start()或set()方法被调用是被触发。

```html
tram(element).stop('opacity'); // specific property
tram(element).stop({ opacity: true, x: true }); // multiple properties
tram(element).stop(); // stops all property transitions
```
#### 支持的属性

------------

每个浏览器对DOM过渡属性的支持是有限的，Tram最大限度的覆盖了所有的跨浏览器属性，另外添加了一些扩展。

##### 支持的属性（属性名/值）
- 'color' //color
- 'background' //color
- 'outline-color' //color
- 'border-color' //color
- 'border-top-color' //color
- 'border-right-color' //color
- 'border-bottom-color' //color
- 'border-left-color' //color
- 'border-width' //length
- 'border-top-width' //length
- 'border-right-color' //length
- 'border-bottom-color' //length
- 'border-left-color' //length
- 'border-spacing' //length
- 'letter-spacing' //length
- 'margin' //length
- 'margin-top' //length
- 'margin-right' //length
- 'margin-bottom' //length
- 'margin-left' //length
- 'padding' //length
- 'padding-top' //length
- 'padding-right' //length
- 'padding-bottom' //length
- 'padding-left' //length
- 'outline-width' //length
- 'opacity' //number
- 'top' //length, percentage
- 'right' //length, percentage
- 'bottom' //length, percentage
- 'left' //length, percentage
- 'font-size' //length, percentage
- 'text-indent' //length, percentage
- 'word-spacing' //length, percentage
- 'width' //length, percentage
- 'min-width' //length, percentage
- 'max-width' //length, percentage
- 'height' //length, percentage
- 'min-height' //length, percentage
- 'max-height' //length, percentage
- 'line-height' //length, percentage
- 'transform' //length, percentage
- 'scroll-top' //length, percentage
- 'scroll-left' //length, percentage

- TODO - planned support
- 'background-position' // [x, y] length, percentage
- 'transform-origin' // [x, y] length, percentage
- 'clip' // [x, y, w, h] rectangle
- 'crop' // [x, y, w, h] rectangle
注意：.add()方法需要dash-style的名字，而其他方法如.start()和.stop()需要驼峰写法。

##### Transforms
- 'x' // length, percentage
- 'y' // length, percentage
- 'z' // length, percentage
- 'rotate' // angle
- 'rotateX' // angle
- 'rotateY' // angle
- 'rotateZ' // angle
- 'scale' // number
- 'scaleX' // number
- 'scaleY' // number
- 'scaleZ' // number
- 'skew' // angle
- 'skewX' // angle
- 'skewY' // angle
- 'perspective' // length
##### Easings
// Defaults

- 'ease'
- 'ease-in'
- 'ease-out'
- 'ease-in-out'
- 'linear'
// Quad

- 'ease-in-quad'
- 'ease-out-quad'
- 'ease-in-out-quad'
// Cubic

- 'ease-in-cubic'
- 'ease-out-cubic'
- 'ease-in-out-cubic'
// Quart

- 'ease-in-quart'
- 'ease-out-quart'
- 'ease-in-out-quart'
// Quint

- 'ease-in-quint'
- 'ease-out-quint'
- 'ease-in-out-quint'
// Sine

- 'ease-in-sine'
- 'ease-out-sine'
- 'ease-in-out-sine'
// Expo

- 'ease-in-expo'
- 'ease-out-expo'
- 'ease-in-out-expo'
// Circ

- 'ease-in-circ'
- 'ease-out-circ'
- 'ease-in-out-circ'
// Back

- 'ease-in-back'
- 'ease-out-back'
- 'ease-in-out-back'